JAVASCRIPT
Leveraging Vue 3 Teleport for Rendering Modals and Overlays
Understand how to use Vue 3's built-in Teleport feature to render component content into a different part of the DOM tree, addressing common issues with modals, tooltips, and global overlays.
<template>
<button @click="isModalOpen = true">Open Modal</button>
<!-- The modal component content is 'teleported' to the #modal-root element -->
<teleport to="#modal-root">
<div v-if="isModalOpen" class="modal-backdrop" @click.self="isModalOpen = false">
<div class="modal-content">
<h2>Welcome to the Teleported Modal!</h2>
<p>This modal is rendered directly under the body tag, outside the normal component hierarchy.</p>
<button @click="isModalOpen = false">Close Modal</button>
</div>
</div>
</teleport>
</template>
<script setup>
import { ref } from 'vue';
const isModalOpen = ref(false);
</script>
<style scoped>
/* Add this to your main HTML file (e.g., public/index.html) */
/* <div id="app"></div> */
/* <div id="modal-root"></div> */
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 500px;
width: 90%;
text-align: center;
}
h2 {
margin-top: 0;
color: #333;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin-top: 20px;
}
button:hover {
background-color: #369b70;
}
</style>
How it works: This snippet illustrates how to use Vue 3's `Teleport` feature to render a modal. Instead of the modal content being nested within its parent component's DOM, `<teleport to="#modal-root">` moves it directly into an element with the ID `modal-root` (which should exist in your `index.html`, often right under `<body>`). This solves common styling issues (like `z-index` conflicts or `overflow: hidden` on parent elements) and ensures accessibility for global UI elements like modals, tooltips, and notifications, regardless of where the component is rendered in the Vue component tree.