<Teleport> renders a component's markup at a different place in the DOM than where it's declared in your component tree — while keeping it logically part of the component (reactivity, props, events all still work).
Modals, tooltips, and notifications often need to be a to avoid CSS issues — a parent's , , or stacking context can clip or mis-layer a modal. But logically, the modal belongs to the component that triggers it.
<body>overflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render this elsewhere... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
The modal markup is moved to be a child of <body> in the real DOM, escaping any clipping/stacking parents — yet open, @click, and any props remain fully reactive, because logically it's still part of this component.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
By escaping the trapping ancestors, the modal can reliably cover the whole viewport and sit above all other content with a predictable z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport cleanly solves the classic CSS problem of overlays (modals, tooltips, toasts, dropdowns) being clipped or mis-stacked by their DOM ancestors.
It lets you author the overlay where it logically belongs (inside the triggering component, with full reactivity) while rendering it where it needs to be in the DOM (usually <body>).
It's Vue's built-in equivalent of React portals — the standard, robust way to build overlay UI.