<Teleport> render content vào một DOM node nằm ngoài component tree — nhưng vẫn là con về mặt logic (data flow, events hoạt động bình thường):
vue
<Teleport to="body">
<div class="modal-overlay" v-if="showModal">
<div class="modal">...</div>
</div>
</Teleport>Use cases:
- Modals, drawers, tooltips — tránh z-index/overflow issues
- Notifications/toasts — render ở root level
- Bất kỳ UI cần break khỏi parent overflow/stacking context
Pitfall: Teleport content vẫn share reactive state với parent component — props, emits, provide/inject hoạt động bình thường.