<Teleport> Teleport Content Elsewhere
Last updated: 2026-10-22
<Teleport> Teleport Content Elsewhere
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<Teleport to="body">
<div class="modal">Modal content</div>
</Teleport>⚙️ Arguments
| props | to (a selector or element) and disabled |
|---|
▶ Example
Edit the code below and see the live result:
Output：
The modal mounts under body, escaping the #app container.💡 Key Points
ℹ️ Note Logically it remains the component's child — data flow is unchanged.
💡 Tip Target body or a dedicated layer container to dodge clipping and stacking issues.
ℹ️ Note v-if orders multiple teleports; disabled renders in place.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why do modals get clipped?
A Ancestors with overflow or transforms clip them; teleporting escapes.
Q Do events still bubble to the tree?
A DOM events follow the real DOM; component semantics stay intact.
Q Can I target a custom container?
A Yes — to="#modal-root", provided the target exists.
