JSPM – vue2-teleport@1.2.2

Package Exports

vue2-teleport
vue2-teleport/dist/teleport.esm.js
vue2-teleport/dist/teleport.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue2-teleport) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue2-teleport

This package is an alternative to vue3's teleport component. You can use the documentation provided by vue as a starting point to using this package.

Installation

npm install vue2-teleport

Example

<template>
  <div>
      <button @click="modalOpen = true">
          Open full screen modal! (With teleport!)
      </button>
    
      <Teleport to="body">
        <div v-if="modalOpen" class="modal">
          <div>
            I'm a teleported modal! 
            (My parent is "body")
            <button @click="modalOpen = false">
              Close
            </button>
          </div>
        </div>
      </Teleport>
  </div>
</template>

<script>
import Teleport from 'vue2-teleport';

export default {
  components: {
    Teleport,
  },
  data() {
    return { 
      modalOpen: false
    }
  }
}
</script>

Props

Prop	Type	Default	Description
`to`	`String \| HTMLElement`	(required)	A CSS selector or DOM element the content is teleported into.
`where`	`String`	`'after'`	Where to insert relative to the target's existing children: `'after'` (append) or `'before'` (prepend).
`disabled`	`Boolean`	`false`	When `true`, the content stays in place instead of being teleported.

Multiple targets

If to is a selector that matches more than one element, the content is teleported into every match. The first match receives the live, reactive nodes; the additional matches receive static deep clones.

<Teleport to=".sidebar">
  <span class="badge">New</span>
</Teleport>

Note: clones in the extra targets are static snapshots — they don't receive reactive updates or Vue event listeners. Use multiple targets for static content; for interactive content prefer a single target.

License

This project is licensed under the CC0-1.0 License.