vuejs
/

Vue Teleport

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

vuejs

Vue Teleport

What is Teleport?

Teleport is a built-in Vue feature that allows you to render a component's content in a different part of the DOM.

Why Use Teleport?

  • Render modals outside root
  • Avoid CSS overflow issues
  • Improve layout flexibility
  • Control DOM structure easily

Basic Syntax

HTMLRead-only
1
<teleport to="#modal">
  <div class="modal">Hello Modal</div>
</teleport>

Target Element

HTMLRead-only
1
<div id="modal"></div>

Conditional Teleport

HTMLRead-only
1
<teleport to="#modal" v-if="show">
  <div>Popup</div>
</teleport>

Common Use Cases

  • Modals and dialogs
  • Dropdown overlays
  • Tooltips
  • Notifications

Best Practices

  • Use teleport for UI overlays
  • Ensure target element exists
  • Keep teleport usage minimal
  • Combine with conditional rendering

Common Mistakes

  • Missing target element
  • Overusing teleport unnecessarily
  • Ignoring component structure
  • Not handling visibility properly

Conclusion

Vue Teleport provides powerful control over DOM placement, making it ideal for overlays and UI elements that need to escape component boundaries.

Try it yourself

<teleport to="#modal">
  <div>Modal</div>
</teleport>

Test Your Knowledge

Q1
of 3

Teleport used for?

A
Routing
B
DOM rendering
C
API
D
State
Q2
of 3

Attribute used?

A
src
B
to
C
href
D
bind
Q3
of 3

Use case?

A
Database
B
Modal
C
API
D
Routing

Frequently Asked Questions

What is teleport?

It renders content outside component hierarchy.

Where is teleport used?

For modals, tooltips, and overlays.

What is 'to' attribute?

It defines target DOM element.

Previous

vue mixins

Next

vue suspense

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.