Vue portal

teleports the content to another location in the dom

Version: 1.0.0 Updated: 05/26/2017

By: vue-comps License: MIT

Downloads Last 30 Days: 272

Install

npm i vue-portal
yarn add vue-portal

Repository: https://github.com/vue-comps/vue-portal

CDNs

bundle.run: https://bundle.run/vue-portal

jsDelivr: https://cdn.jsdelivr.net/npm/vue-portal

unpkg: https://unpkg.com/vue-portal

vue-portal

teleports the content to another location in the dom. Similar to vue-transfer-dom and vue-move-dom, but as a component instead of a directive.

Demo

Install

npm install --save-dev vue-portal

or include build/bundle.js.

Usage

# in your component
components:
  "portal": require("vue-portal")
# or, when using bundle.js
components:
  "portal": window.vueComps.portal
<portal>
  <span>Will be appended to body</span>
</portal>
<portal target="#somewhere">
  <span>Will be appended to element with ID somewhere</span>
</portal>

For examples see dev/.

Props

Name type default description
target String or Element - where the content will be appended. Defaults to document.body. Uses document.querySelector to convert a String to Element.

Behavior

Works with v-if but not v-show on <portal>.

<portal v-if="active">
  <span>Will be appended to body</span>
</portal>
<portal>
  <span v-show="active">Will be appended to element with ID somewhere</span>
</portal>

target prop can be dynamic.

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Categories: Vue js