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

javascript

<!-- 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

Instructs Vue to move the content inside this tag to the end of the <body>.

v-if="isOpen"

Teleport respects standard directives like v-if for conditional rendering.

class="modal"

Styles are still applied even though the element moves in the DOM.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Managing Modal Context with Teleport

Related