vue2-teleport

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

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.