Skip to content

Teleport

<Teleport> renders slot content to another DOM location (often body). This lesson covers practical patterns, syntax, and mistakes to avoid.

Rendering with Teleport

<Teleport> renders slot content to another DOM location (often body).

Ideal for modals and toasts escaping overflow/stacking contexts.

<Teleport to="body">
  <div v-if="open" class="modal">...</div>
</Teleport>

Modal teleported to body.

A11y

focus trap, Escape, aria-modal
  • Handle loading and errors.
  • Keep composables tested.
  • Prefer TypeScript when you can.
  • Measure before optimizing.

Teleport Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
to selector Target
disabled prop Conditional
defer prop Timing
multiple ok Nodes
SSR target exist Care
nesting supported Note

Still Vue Tree

Logic/parentage remain in component hierarchy.

Common Mistakes

  • Teleporting without focus management.
  • Missing open/close transitions carefully.

Key Takeaways

  • Teleport shows up often in Vue apps.
  • Practice with a demo.
  • Prefer clear APIs.
  • Read official docs for edge cases.

Pro Tip

Return focus to the opener when closing a teleported modal.

You now understand teleport. Next, continue with Suspense to keep building your Vue skills.