<Teleport> prikazuje markup komponente na drugem mestu v DOM-u kot tam, kjer je deklarirana v vašem drevesu komponent — medtem ko ostane logično del komponente (reaktivnost, props, dogodki vse še delujejo).
Modalni okni, tooltips in obvestila pogosto morajo biti da se izognejo CSS težavam — , ali stacking kontekst nadrejenega elementa lahko prireže ali narobe razporedi modalno okno. Vendar logično modalno okno spada k komponenti, ki ga sproži.
<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 modalnega okna je premaknjen, da postane otrok <body> v pravem DOM-u, kar izogne kateremukoli prireznemu/razporedilnemu nadrejenemu — vendar open, @click in vsi props ostanejo polno reaktivni, ker logično ostane del te komponente.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Z izogibanjem zapletenim prednikom lahko modalno okno zanesljivo pokrije celoten viewport in sedi nad vso drugo vsebino s predvidljivim z-index.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport čisto rešuje klasični CSS problem, da so sloji (modalna okna, tooltips, toasts, spustni seznami) prirezniti ali narobe razporejeni s svojimi DOM predniki.
Pushča vas, da napišete sloj kjer logično spada (znotraj komponente, ki jo sproži, s polno reaktivnostjo) hkrati pa ga upodobite kjer mora biti v DOM-u (običajno <body>)
To je Vue-jev vgrajen ekvivalent React portalov — standardni, robust način za gradnjo slojnega vmesnika.