new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · Guide · all subjects

teleport

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Teleport basic purpose and use case

Teleport is a built-in component that allows rendering a part of a component's template into a DOM node that exists outside the DOM hierarchy of that component. The most common use case is building full-screen modals, where the modal code and button belong together logically but need to be rendered elsewhere in the DOM visually.

Teleport solves positioning issues with nested components

When a modal is rendered deeply nested in the application's DOM hierarchy, position: fixed becomes relative to the nearest ancestor with transform, perspective, or filter properties rather than the viewport. Additionally, the modal's z-index is constrained by containing elements. Teleport avoids these issues by breaking out of the nested DOM structure.

Teleport to prop syntax

The Teleport component uses a 'to' prop that accepts either a CSS selector string or an actual DOM node. For example, <Teleport to="body"> teleports content to the body tag.

Teleport target must exist in DOM before mount

The teleport 'to' target must already be in the DOM when the Teleport component is mounted. Ideally, this should be an element outside the entire Vue application. If targeting another element rendered by Vue, that element must be mounted before the Teleport.

Teleport does not affect component hierarchy

Teleport only alters the rendered DOM structure, not the logical hierarchy of components. A component inside Teleport remains a logical child of the parent component containing the Teleport. Props passing, event emitting, and injections from parent components continue to work the same way, and the child component will still be nested below the parent in Vue Devtools.

Teleport disabled prop for conditional teleporting

Teleport supports a 'disabled' prop that can be dynamically toggled to conditionally disable teleporting. For example, <Teleport :disabled="isMobile"> allows rendering inline on mobile while using teleport on desktop.

Multiple Teleports on same target

Multiple Teleport components can mount their content to the same target element. The order is a simple append, with later mounts appearing after earlier ones, all within the target element.

Deferred Teleport in Vue 3.5+

Vue 3.5 and above support the 'defer' prop on Teleport to defer target resolving until other parts of the application have mounted. This allows the Teleport to target a container element rendered by Vue later in the component tree. The target element must be rendered in the same mount/update tick as the Teleport.

Basic Teleport example with modal

<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> This example shows how to wrap a modal div in Teleport to render it to the body tag instead of within the nested component hierarchy.

Deferred Teleport example syntax

<Teleport defer to="#late-div">...</Teleport> <!-- somewhere later in the template --> <div id="late-div"></div> This example shows deferred Teleport syntax for Vue 3.5+, allowing the Teleport to target a container element that is defined later in the same template.

Give your agent this brain