Skip to content

teleports the content to another location in the dom

Notifications You must be signed in to change notification settings

vue-comps/vue-portal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DEPRECATED see cerijs and ceri-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.

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>. Use v-show on children instead:

<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.

About

teleports the content to another location in the dom

Resources

Stars

Watchers

Forks

Packages

No packages published