Teleport

• allows you to render a component's children at a different location in the DOM, providing flexibility for creating overlays, modals, and similar UI patterns.

Basic implementation

<button @click="open = true">Open Modal</button>

<Teleport to="body">
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</Teleport>

• use the "to" attribute to specify the target destination where the content should be rendered.

Disabling teleport

<Teleport :disabled="isMobile">
  ...
</Teleport>