# portal-vue

> > A Portal Component for Vue 3, to render DOM outside of a component, anywhere in the document.

Latest version **3.0.0** (published 2022-12-11) · MIT license · 0 weekly downloads

> **Better alternative:** See documentation for alternatives (https://github.com/AikidoSec/module-replacements/blob/main/docs/portal-vue)

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-12-11 |
| First published | 2017-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.19 |
| Dependencies | 0 |
| Unpacked size | 119.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3884 |
| Author | Thorsten Lünborg |
| Maintainers | linusborg |

## Links

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

## Recent versions

- 3.0.0 (latest) — 2022-12-11
- 3.0.0-rc.3 (rc) — 2022-12-11
- 3.0.0-beta.0 (next) — 2021-08-03
- 3.0.0-rc.2 — 2022-12-10
- 3.0.0-rc.1 — 2022-12-10
- 3.0.0-alpha.0 — 2021-02-16
- 2.1.7 — 2019-12-28
- 2.1.6 — 2019-08-01
- 2.1.5 — 2019-06-01
- 2.1.4 — 2019-05-03
- 2.1.3 — 2019-04-24
- 2.1.2 — 2019-04-24
- 2.1.1 — 2019-04-18
- 2.1.0 — 2019-04-14
- 2.0.1 — 2019-04-11
- … 28 more at https://npm.io/package/portal-vue/versions

## README

# PortalVue

> A Portal Component for Vue 3, to render DOM outside of a component, anywhere in the document.

<!-- markdownlint-disable MD033 -->
<p style="tex-align: center">
  <img src="https://portal-vue.linusb.org/logo.png" alt="PortalVue Logo">
</p>

<p>
<a href='https://ko-fi.com/R6R7QW4D' target='_blank'>
  <img height='36' style='border:0px;height:36px;margin-bottom:30px;' src='https://az743702.vo.msecnd.net/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' />
</a>
<p>

For more detailed documentation and additional Information, [please visit the docs](https://next.portal-vue.linusb.org).

> Looking for the version for Vue 2.\*? [Docs for PortalVue 2.*, compatible with Vue 2, are here](https://v2.portal-vue.linusb.org)

## Installation

```bash
npm i portal-vue

# or

yarn add portal-vue
```

```javascript
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
```

## Usage

```html
<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is  located.</p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anywhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>
```

## Nuxt module

Add `portal-vue/nuxt` to modules section of `nuxt.config.js`

```javascript
{
  modules: ['portal-vue/nuxt']
}
```

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