How does teleport work in Vue 3?
Learn how Vue 3 Teleport renders content elsewhere in the DOM to build modals and tooltips that escape overflow and z-index traps while keeping reactivity.
Expected Interview Answer
Teleport is a Vue 3 built-in component that renders its child content into a different place in the real DOM — specified by a to target selector — while keeping that content logically part of the component's template and reactivity.
You wrap markup in <Teleport to="#target"> and Vue moves the rendered nodes to the matching DOM element, commonly document.body, so overlays like modals, tooltips, and toasts escape parent CSS constraints such as overflow: hidden, transform, or z-index stacking contexts. Despite living elsewhere in the DOM, the teleported content stays a child in the component tree: props, events, provide/inject, and reactivity all work as if it never moved, and a disabled prop can toggle teleporting on or off.
- Escapes parent overflow, transform, and z-index stacking traps
- Keeps modal/tooltip logic co-located with its component
- Preserves reactivity, props, events, and provide/inject
- Lets multiple teleports stack into the same target in order
- Can be disabled conditionally to render in place instead
AI Mentor Explanation
Teleport is like the giant stadium screen: the action is controlled from the pitch, but its picture is displayed high on the boundary wall where everyone can see it, unobstructed by the players in front. The play still belongs to the match, yet it's rendered somewhere with a clear view — just as a modal is owned by its component but painted at the top of the page.
Step-by-Step Explanation
Step 1
Wrap the content
Place the markup you want to relocate inside a <Teleport> element in your component template.
Step 2
Set the target
Give it a to prop with a CSS selector or element reference, such as to="body" or to="#modals".
Step 3
Vue moves the nodes
At render time Vue mounts the child DOM nodes inside the target element instead of the component's own location.
Step 4
Reactivity stays intact
Props, events, provide/inject, and state updates continue to work as if the content never moved.
Step 5
Toggle when needed
Use the disabled prop to conditionally render in place — for example, inline on desktop but teleported on mobile.
What Interviewer Expects
- That teleport moves DOM output but not logical position in the component tree
- The to prop and common targets like document.body
- Why it solves overflow, transform, and z-index stacking issues
- That reactivity, events, and provide/inject still work
- Awareness of the disabled prop and multiple teleports to one target
Common Mistakes
- Thinking teleport also detaches the component logically, breaking props or events
- Targeting an element that does not exist yet in the DOM
- Using teleport for layout instead of overlays that need to escape clipping
- Forgetting that multiple teleports append to the target in order
- Assuming teleported content loses provide/inject access
Best Answer (HR Friendly)
“Teleport lets you write a modal or tooltip inside a component but have Vue actually display it somewhere else on the page, like the very top. This keeps your code together while making sure pop-ups aren't cut off or hidden by surrounding styles.”
Code Example
<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>
<template>
<button @click="open = true">Open modal</button>
<!-- Rendered into <body>, but still driven by this component -->
<Teleport to="body">
<div v-if="open" class="overlay">
<div class="modal">
<p>I escaped the parent's overflow and z-index.</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>Follow-up Questions
- How does the disabled prop change teleport behavior?
- Can multiple teleports target the same element, and what order do they render in?
- Does provide/inject still work through a teleport?
- Why does teleport help with z-index and overflow issues?
- How does teleport interact with server-side rendering?
MCQ Practice
1. What does the to prop on <Teleport> specify?
The to prop takes a CSS selector or element that becomes the mount target for the teleported content.
2. After teleporting, where does the content live logically?
Teleport only moves the rendered DOM; logically the content remains a child, so props, events, and reactivity still work.
3. Which problem does teleport most commonly solve?
Modals and tooltips often get clipped by a parent's overflow, transform, or stacking context; teleport moves them out to escape it.
Flash Cards
What is Teleport in Vue 3? — A built-in component that renders its children into a different DOM location via the to prop.
Why use Teleport? — To let overlays escape parent overflow, transform, and z-index stacking constraints.
Does reactivity survive a teleport? — Yes — props, events, provide/inject, and state all keep working as if content never moved.
What does the disabled prop do? — Renders the content in place instead of teleporting it, toggleable at runtime.