Vue-portal NPM

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

portal component vue

vue-mixins

parceiro-foundation @infinitebrahmanuniverse/nolb-vue-po @everything-registry/sub-chunk-3089 vue-pdc-ext-frontend pdc-ext-frontend pdc-foundation pdc-foundation-frontend pdc-foundation-frontend-2

1.0.0

9 years ago