Vue 3's Teleport component is used to render part of the template content to the specified location of the DOM. 1. Use the to attribute to specify the target container such as body or custom elements; 2. It is often used in scenes where the modal boxes, prompt boxes, etc. need to be separated from the parent structure; 3. Ensure that the target element exists and multiple Teleports can share the same target; 4. Events and responsiveness are still valid; 5. Display can be controlled in combination with v-if; 6. It is recommended to use independent containers in complex scenarios to avoid conflicts; this function solves the problems of CSS overflow hiding and hierarchical stacking, so that the UI is displayed correctly according to visual needs.
In Vue 3, the Teleport component allows you to render a part of your component's template into a different location in the DOM — typically outside the parent component's structure. This is especially useful for things like modals, toolstips, dropdowns, or notifications that need to break out of their container (eg, to avoid CSS overflow issues or z-index problems).
Here's how to use Teleport effectively in Vue 3.
What Teleport Does
By default, Vue components render their content within their own DOM hierarchy. But sometimes you want a piece of UI (like a modal) to visually "escape" its parent — for example, to appear above everything else on the page. Teleport lets you move that content to a different part of the DOM (like
Basic Syntax
The Teleport component uses the to prop to specify a CSS selector indicating where the content should be moved.
<template>
<div>
<p>This is rendered in the original location.</p>
<Teleport to="body">
<div class="modal">
<p>This is rendered inside the <body> element.</p>
</div>
</Teleport>
</div>
</template> In this example, the <div class="modal"> will be moved to the end of the <body> element, even though it's written inside the component's template.
Common Use Case: Modal Dialog
A typical use case is rendering a modal that covers the entire screen.
<template>
<div>
<!-- Button to open the modal -->
<button @click="isOpen = true">Open Modal</button>
<!-- Teleport the modal to body -->
<Teleport to="body">
<div v-if="isOpen" class="modal-overlay">
<div class="modal">
<p>Hello from the modal!</p>
<button @click="isOpen = false">Close</button>
</div>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>
<style>
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
</style> Even if the parent component is inside a overflow: hidden container, the modal will appear over everything because it's rendered directly in <body> .
Key Points to Remember
The to target must exist : The selector in to (like "body" or "#modal-container" ) must match an existing element in the DOM. If not, nothing will be rendered.
Multiple Teleports can target the same location : All will be appended to the target element in order.
Events still work normally : Even though the DOM is moved, event listeners and reactivity stay connected to the Vue component.
You can conditionally teleport : Combine v-if or v-show with Teleport to control when the content is injected.
Use unique containers for complex cases : instead of teleporting to body , you might want a dedicated container:
<div id="teleport-target"></div>
<Teleport to="#teleport-target">
<p>This goes into the specific container.</p>
</Teleport>
When to Use Teleport
- Modals, popups, or dialogs
- Tooltips and dropdown menus
- Notifications or toast messages
- Fullscreen overlays
It solves the problem of CSS clipping (eg, overflow: hidden ) and simplifies z-index layering.
Basically, Teleport gives you the flexibility to render UI where it should visually appear, not just where it lives in the component tree. It's a simple but powerful feature in Vue 3 for building better user interfaces.
The above is the detailed content of How to use Teleport to move component DOM in Vue 3. For more information, please follow other related articles on the PHP Chinese website!
![\"How](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175409172715194.jpeg\")