javascript / intermediate
Snippet
Managing Modal Context with Teleport
Teleport allows you to 'teleport' a part of a component's template into a DOM node that exists outside the component's hierarchy (like the document body). This solves z-index and overflow issues while keeping component logic encapsulated.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- App.vue or parent --><template><div class="container"><button @click="isOpen = true">Open Modal</button><Teleport to="body"><div v-if="isOpen" class="modal"><p>I am rendered at the end of the body!</p><button @click="isOpen = false">Close</button></div></Teleport></div></template>
vue
Breakdown
1
<Teleport to="body">
Instructs Vue to move the content inside this tag to the end of the <body>.
2
v-if="isOpen"
Teleport respects standard directives like v-if for conditional rendering.
3
class="modal"
Styles are still applied even though the element moves in the DOM.