Back
VueMediumNew
What is `Teleport` and when would you use it?
Rendering content outside the parent DOM tree
Ideal Answer
<Teleport> lets you render a component's template content at a different location in the DOM, outside the parent's DOM hierarchy, while keeping it part of the same logical component tree (so it still shares reactive state and props).
Common use case: modals, tooltips, or notifications that need to escape a parent with overflow: hidden or a low z-index, by rendering directly under <body>.
JavaScript
<Teleport to="body">
<div class="modal">...</div>
</Teleport>