FrontendDeveloper.in

Vue.js Track Detail

What is teleport?

The <Teleport> component allows you to render a part of your component's template into a different location in the DOM — outside the current component's hierarchy.

Example:

  1. Wrap teleport component around the modal template inside app.vue file
<template>
<h1>Page Content</h1>

<!-- This modal will render in the #modals element -->
<teleport to="#modals">
</teleport>
</template>
  1. Render modal component inside main index.html file
<body>
</body>

In Vue 2, this functionality was possible via the community plugin portal-vue

Use cases

  1. Modals
  2. Toasts
  3. Tooltips
  4. Context menus
  5. Dropdowns
  6. Anything that needs to break out of DOM nesting
Back to all Vue.js questions