0
0
Vueframework~5 mins

Teleport for rendering elsewhere in Vue

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Teleport lets you move part of your Vue app's content to a different place in the HTML. This helps keep your app organized and works well for things like modals or tooltips.

You want to show a popup or modal that appears outside the main app area.
You need to place a tooltip near an element but outside its container.
You want to render a dropdown menu at the root of the page to avoid clipping.
You want to keep your HTML structure clean but still show some content elsewhere.
Syntax
Vue
<teleport to="CSS selector or element">
  <!-- content to render elsewhere -->
</teleport>
The tag wraps the content you want to move.
The 'to' attribute tells Vue where to put the content in the DOM.
Examples
This moves the modal div to the element with id 'modal-root' in the HTML.
Vue
<teleport to="#modal-root">
  <div class="modal">Hello from modal!</div>
</teleport>
This renders the tooltip div directly inside the <body> tag.
Vue
<teleport to="body">
  <div class="tooltip">Tooltip text</div>
</teleport>
Sample Program

This Vue component shows a button that toggles a modal. The modal content is rendered inside the element with id 'modal-root' using teleport. This keeps the modal outside the main app container but still controlled by Vue.

Vue
<template>
  <div>
    <button @click="show = !show">Toggle Modal</button>
    <teleport to="#modal-root">
      <div v-if="show" class="modal" role="dialog" aria-modal="true" tabindex="-1">
        <p>This is a modal rendered elsewhere!</p>
        <button @click="show = false">Close</button>
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border: 1px solid #ccc;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 1000;
}
</style>
OutputSuccess
Important Notes

Make sure the target element (like #modal-root) exists in your HTML before using teleport.

Teleport keeps Vue reactivity and event handling working normally for the moved content.

Use ARIA roles and keyboard focus management for accessibility when rendering modals or dialogs.

Summary

Teleport moves Vue content to a different place in the HTML.

It is useful for modals, tooltips, and dropdowns that need to escape container limits.

Use the 'to' attribute to specify where to render the content.