<Teleport>
Renders child content into a DOM node elsewhere in the document.
Syntax
<Teleport to="selector | element">...</Teleport>Parameters
| Name | Type | Required | Description |
|---|---|---|---|
to | string | HTMLElement | No | Target container selector or element. |
disabled | boolean | No | When true, renders content in place instead. |
Returns
component — Moves rendered DOM to the target.
Examples
<script setup lang="ts">
import { ref } from 'vue';
const open = ref(false);
</script>
<template>
<button @click="open = true">Open</button>
<Teleport to="body">
<div v-if="open" class="modal">
<button @click="open = false">Close</button>
</div>
</Teleport>
</template>
Notes
Teleport moves the rendered DOM to the target (commonly `body`) while keeping
the content logically a child of the component, so reactivity, props, and
injection still work. Essential for modals, tooltips, and toasts that must
escape `overflow:hidden` or stacking-context parents.