<Teleport> vykresluje markup komponenty na jiném místě v DOM než kde je deklarován v stromu komponent — zároveň jej logicky udržuje jako součást komponenty (reaktivita, props, events všechno funguje normálně).
Modály, tooltips a notifikace často potřebují být aby se vyhnuly CSS problémům — vlastnost , nebo stacking kontext rodiče může oříznout nebo špatně vrstvit modál. Avšak logicky, modál patří komponentě, která jej vyvolá.
<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>
Markup modálu je přesunut aby byl potomkem <body> v reálném DOM, čímž se vyhne jakémukoli ořezávání/vrstvení rodičů — avšak open, @click a jakékoliv props zůstávají plně reaktivní, protože logicky je stále součástí této komponenty.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Uniknutím z omezujících předků může modál spolehlivě pokrýt celý viewport a leží nad veškerým ostatním obsahem s předvídatelným z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport čistě řeší klasický CSS problém overlayů (modály, tooltips, toasts, dropdowny) jež jsou ořezávány nebo špatně vrstveny jejich DOM předky.
Umožňuje vám psát overlay tam, kam logicky patří (uvnitř komponenty, která jej vyvolá, s plnou reaktivitou) zatímco jej vykresluje tam, kde musí být v DOM (obvykle <body>).
Je to vestavěný ekvivalent Vue oproti React portals — standardní, robustní způsob, jak vytvářet overlay UI.