<Teleport> merender markup komponen di tempat berbeda dalam DOM daripada tempat ia dideklarasikan dalam pohon komponen Anda — sambil tetap secara logis menjadi bagian dari komponen (reaktivitas, props, peristiwa semuanya masih berfungsi).
Modal, tooltip, dan notifikasi sering perlu menjadi untuk menghindari masalah CSS — , , atau konteks penumpukan induk dapat memotong atau menyalahsusunan modal. Tetapi secara logis, modal milik komponen yang memicunya.
<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 modal dipindahkan untuk menjadi anak dari <body> dalam DOM nyata, menghindari orang tua penjepit/penumpukan apa pun — namun open, @click, dan props apa pun tetap sepenuhnya reaktif, karena secara logis masih merupakan bagian dari komponen ini.
Without Teleport: With Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← clipped/trapped <Modal/> ← free, on top of everything
Dengan menghindari nenek moyang yang menjebak, modal dapat secara andal menutupi seluruh viewport dan duduk di atas semua konten lainnya dengan z-index yang dapat diprediksi.
<Teleport to="#modal-root">...</Teleport> <!-- a specific container -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- conditionally disable -->
Teleport dengan bersih menyelesaikan masalah CSS klasik overlay (modal, tooltip, toast, dropdown) yang dipotong atau disalahsusunan oleh nenek moyang DOM mereka.
Ia memungkinkan Anda membuat overlay di tempat ia secara logis dimiliki (di dalam komponen pemicu, dengan reaktivitas penuh) sambil merendernya di mana ia harus berada dalam DOM (biasanya <body>).
Ini adalah setara bawaan Vue dari portal React — cara standar dan kokoh untuk membangun UI overlay.