Teleports

Vue 3 provides the component which allows content to be rendered elsewhere in the DOM, outside of the Vue application.

The to target of <Teleport> expects a CSS selector string or an actual DOM node. Nuxt currently has SSR support for teleports to body only, with client-side support for other targets using a <ClientOnly> wrapper.

Example: body teleport

  1. <template>
  2.   <button @click="open = true">
  3.     Open Modal
  4.   </button>
  5.   <Teleport to="body">
  6.     <div v-if="open" class="modal">
  7.       <p>Hello from the modal!</p>
  8.       <button @click="open = false">
  9.         Close
  10.       </button>
  11.     </div>
  12.   </Teleport>
  13. </template>

Example: client-side teleport

  1.   <ClientOnly>
  2.     <Teleport to="#some-selector">
  3.       <!-- content -->
  4.     </Teleport>
  5.   </ClientOnly>
  6. </template>

🔎

Read and edit a live example in Examples > App > Teleport