Modals, Tooltips, and Dropdowns often suffer from z-index issues when nested deep in the component tree. Vue 3’s `<teleport>` allows a component to render its children elsewhere in the DOM (e.g., direct child of `<body>`) while keeping the logical hierarchy intact.
Implementation
<template>
<button @click="open = true">Open Modal</button>
<teleport to="body">
<div v-if="open" class="modal">
<div>
I am a direct child of body!
<button @click="open = false">Close</button>
</div>
</div>
</teleport>
</template>Common Use Cases
- **Fullscreen Overlays**: Avoid parent `overflow: hidden` clipping.
- **Notifications**: Stack toasts in a dedicated container.
Key Takeaways
- The component state (`open`) is still managed by the parent.
- Event bubbling works through the virtual DOM, so clicks in the modal bubble to the parent button!
Discover more from C4: Container, Code, Cloud & Context
Subscribe to get the latest posts sent to your email.