in Vue 3 is used to render content outside the current component DOM structure. 1. It allows you to move elements such as modal boxes, prompt tools to other locations on the page to solve layout problems, z-index hierarchy and accessibility problems; 2. When using it, you need to wrap the target content and specify the target selector, such as ; 3. Vue will physically move the corresponding DOM node to the specified location while maintaining responsiveness and event logic; 4. Common application scenarios include modal boxes, notification messages, tooltips and barrier-free content; 5. When using it, you need to ensure that the target element already exists, and pay attention to the style scope and dynamic logic processing. In short, maintains the logical relationship of component tree through virtual references, providing a concise solution for complex UIs.

In Vue 3, <teleport></teleport> plays a key role when you need to render content outside the current component's DOM structure — like when you want a modal or tooltip to appear somewhere else in the page, even if it's not part of the component tree that rendered it. It used to be a separate library called PortalVue in the Vue 2 ecosystem, but now it's built right into Vue 3.

What Does <teleport></teleport> Actually Do?

At its core, <teleport></teleport> lets you move a piece of your template to a different location in the DOM. This is super handy for things like modals, dropdowns, or toolstips that need to break out of parent containers — especially ones with overflow: hidden or z-index issues.

You use it by wrapping the content you want to teleport and specifying a target selector:

 <teleport to="#modal-root">
  <div class="modal">This will show up inside #modal-root</div>
</teleport>

Behind the scenes, Vue moves that DOM node outside of your component and appends it where you told it to go — without breaking reactivity or event handling.

Common Use Cases for Teleport

• Modals and overlays : These often need to sit at the top level of the page so they can cover everything.
• Tooltips and popups : Especially useful when nested inside scrolling containers.
• Notifications or toast messages : You might want these to appear in a dedicated area of ??the page, regardless of where they're triggered from.
• Accessibility-related content : Like skip links or screen-reader-only text that needs to live in a specific place.

These are all situations where rendering inside your component would cause layout issues, z-index headaches, or accessibility snags.

How It Works Under the Hood

When you use <teleport></teleport> , Vue doesn't just move the DOM — it keeps the logical connection to your component. That means:

• Data bindings still work normally.
• Events bubble as expected (though be careful with native DOM events).
• Components inside the <teleport></teleport> stay mounted and reactive.

It does this by keeping a virtual reference in the original location while rendering the actual DOM elsewhere. So visually, it's in a new spot, but from Vue's perspective, it's still part of your component tree.

One thing to note: if you're doing something like checking parent-child DOM relationships via JavaScript, the real DOM won't match what your component tree looks like. That's usually fine, but it's worth being aware of.

Tips for Using <teleport></teleport> Effectively

• Make sure your target element (like #modal-root ) exists before any teleported content tries to render — otherwise Vue will warn you in the console.
• You can teleport multiple components to the same target; they'll stack in the order they were rendered.
• Avoid putting dynamic keys or conditional logic inside <teleport></teleport> unless necessary — it can complicate timing and cleanup.
• Style teleported content carefully — since it lives outside your component, CSS modules or scoped styles might not apply as expected.

Also, keep in mind that <teleport></teleport> doesn't affect the component lifecycle. The component inside the teleport still mounts and unmounts based on your app logic — only its DOM position changes.

Basically that's it. Once you get the hang of it, <teleport></teleport> becomes a go-to tool for managing tricky UI patterns without hacks.

The above is the detailed content of What is the role of (formerly PortalVue) in Vue 3 for rendering content outside the current component's DOM hierarchy?. For more information, please follow other related articles on the PHP Chinese website!