JSPM – vue2-teleport@1.2.0

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>

License

This project is licensed under the CC0-1.0 License.