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

1npm install --save-dev vue-portal

or include build/bundle.js.

Usage

1# in your component
2components:
3  "portal": require("vue-portal")
4# or, when using bundle.js
5components:
6  "portal": window.vueComps.portal

1<portal>
2  <span>Will be appended to body</span>
3</portal>
4<portal target="#somewhere">
5  <span>Will be appended to element with ID somewhere</span>
6</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>.

1<portal v-if="active">
2  <span>Will be appended to body</span>
3</portal>
4<portal>
5  <span v-show="active">Will be appended to element with ID somewhere</span>
6</portal>

target prop can be dynamic.

Development

Clone repository.

1npm install
2npm run dev

Browse to http://localhost:8080/.

License

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