LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 2912 min read

Teleport

Render a component's content into a different part of the DOM — like a modal or tooltip attached to <body> — with Teleport.

The Problem Teleport Solves

A modal or tooltip logically belongs deep inside a component's markup, but rendering it there in the actual DOM can cause real problems — a parent with overflow: hidden or a lower z-index can clip or bury it, even though visually it should sit on top of everything.

Using Teleport

<Teleport> renders its slot content at a completely different point in the actual DOM tree — commonly directly under <body> — while its state and logic stay exactly where they are in the component tree.

<template>
  <button @click="showModal = true">Open Modal</button>


  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>Modal content, rendered at the end of &lt;body&gt;.</p>
      <button @click="showModal = false">Close</button>
    </div>
  </Teleport>
</template>
Logic Stays in Place

Even though the DOM output moves to <body>, showModal and the click handlers are still part of this same component — Teleport only changes where the resulting HTML is inserted, not the component's logical structure.

Wrapping this pattern in a reusable component keeps the Teleport detail hidden from everywhere the modal is used.

<!-- AppModal.vue -->
<script setup>
defineProps(['show']);
defineEmits(['close']);
</script>


<template>
  <Teleport to="body">
    <div v-if="show" class="modal-overlay" @click.self="$emit('close')">
      <div class="modal-content">
        <slot />
      </div>
    </div>
  </Teleport>
</template>

FAQs

Yes, with some additional consideration for where content teleports on the server — Nuxt's documentation covers the specifics for SSR-safe Teleport usage.

Yes — bind the to prop dynamically, e.g. :to="isMobile ? '#mobile-root' : 'body'".

Summary

Teleport solves the classic CSS stacking/overflow problem for modals and tooltips by moving only their DOM output, not their logic. Next, you'll learn Vue's built-in transition and animation system.

Next Lesson →

Transitions & Animations