@holdyourwaffle/portal-vue

PortalVue

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

For more detailed documentation and additional Information, please visit the docs.

Looking for version 1.*? Docs for version 1 are here

In this fork...

Upstream pull requests #340 and #341 have been merged.

This adds a new suspension property to <portal-target>, which suspends all teleportation as long as its value is true.

Installation

npm i @holdyourwaffle/portal-vue

# or

yarn add @holdyourwaffle/portal-vue

import PortalVue from '@holdyourwaffle/portal-vue'
Vue.use(PortalVue)

Transitive dependencies

If you're using bootstrap-vue or another library that has portal-vue as a transitive dependency, you might prefer installing this fork with a Git dependency instead:

npm i git://github.com/HoldYourWaffle/portal-vue.git#suspension-built

# or

yarn add git://github.com/HoldYourWaffle/portal-vue.git#suspension-built

This keeps the module under the standard portal-vue name, allowing NPM to de-dupe the (unforked) transitive dependency.

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

Usage

<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 @holdyourwaffle/portal-vue/nuxt to modules section of nuxt.config.js

{
  modules: ['@holdyourwaffle/portal-vue/nuxt']
}

Or when using a Git dependency:

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