# vue-window-portal

> Vue component to render content in a new window

Latest version **1.6.1** (published 2019-12-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-window-portal
pnpm add vue-window-portal
yarn add vue-window-portal
bun add vue-window-portal
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.1 |
| Published | 2019-12-16 |
| First published | 2019-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 574.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Shamus Taylor |
| Maintainers | shamus03 |
| Keywords | vue, component, portal, window |

## Links

- npm: https://www.npmjs.com/package/vue-window-portal
- Repository: https://github.com/Shamus03/vue-window-portal
- Homepage: https://github.com/Shamus03/vue-window-portal#readme
- Issues: https://github.com/Shamus03/vue-window-portal/issues
- npm.io page: https://npm.io/package/vue-window-portal

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.10

## Recent versions

- 1.6.1 (latest) — 2019-12-16
- 1.0.7-dev.f7b39dff3 (next) — 2019-10-31
- 1.6.0 — 2019-12-03
- 1.5.1 — 2019-12-03
- 1.5.0 — 2019-12-03
- 1.4.0 — 2019-11-03
- 1.3.0 — 2019-11-01
- 1.2.6 — 2019-11-01
- 1.2.5 — 2019-11-01
- 1.2.4 — 2019-11-01
- 1.2.3 — 2019-11-01
- 1.2.2 — 2019-11-01
- 1.2.1 — 2019-11-01
- 1.2.0 — 2019-11-01
- 1.1.0 — 2019-11-01
- … 3 more at https://npm.io/package/vue-window-portal/versions

## README

# vue-window-portal
[![npm version](http://img.shields.io/npm/v/vue-window-portal.svg?style=flat&logo=npm)](https://npmjs.org/package/vue-window-portal "View this project on npm")
[![build status](https://github.com/shamus03/vue-window-portal/workflows/master/badge.svg)](https://github.com/Shamus03/vue-window-portal "View this project on Github")

Vue component to render content in a new window.


This works by creating the element in the main window and adding it to the newly created child window, which removes it from the main window. The original window handles all processing and logic of the now-moved component, so no script tags need to be copied over, just styles.

### Known limitations

- Hot-reloading during development will cause the windows to close/open.
- Styles **will not work** if your page sets Content Security Policy `style-src 'unsafe-inline'`. Unfortunately this includes Github Pages.
  - You can get around this by adding an empty `_window.html` file to your deployed application.
- Styles cannot hot-reload because they are copied when the window is initially opened.
- Style/link tags not in `document.head` will not be copied to the new window (semi-intentional).

# Demo

[Live demo](https://shamus03.github.io/vue-window-portal/)

Or run locally:
```bash
npm run serve
```

# Example usage
See [App.vue](./src/App.vue) for a more detailed example.

```vue
<template>
  <div>
    Main content

    <vue-window-portal open>
      This content will be rendered in a new window
    </vue-window-portal>
  </div>
</template>
```

The window can be controlled via its `open` prop or via the `openPortal()` and `closePortal()` methods.

Use the `.sync` modifier to propagate changes back into your variable, or the `@closed` event if you only care when the window is closed.

Use the `no-style` option to avoid copying style tags into the new window.

---
_Source: https://npm.io/package/vue-window-portal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._