JAVASCRIPT
Vue 3 Teleport for Global Modals
Effortlessly manage modals, tooltips, or notifications in Vue 3 using the built-in Teleport component, ensuring they render correctly outside the component tree.
<template>
<button @click="isOpen = true">Open Modal</button>
<teleport to="body">
<div v-if="isOpen" class="modal-overlay">
<div class="modal-content">
<h2>My Teleported Modal</h2>
<p>This modal content is rendered directly into the body element, regardless of its parent's position in the DOM.</p>
<button @click="isOpen = false">Close Modal</button>
</div>
</div>
</teleport>
</template>
<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
</script>
<style scoped>
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
text-align: center;
}
</style>
How it works: Vue 3's `Teleport` component provides a clean way to render a part of your component's template into a different DOM node, often outside its parent component's DOM hierarchy. This is incredibly useful for implementing global components like modals, notifications, or tooltips that need to break out of their parent's styling or z-index context. By setting the `to` prop to a CSS selector (e.g., `'body'` or `'#modal-root'`), you control where the content is rendered in the actual DOM.