◇

Teleport

1 parts

Renders its slot content into a different part of the DOM (a portal), wrapping Vue's built-in <Teleport> with SSR-safe defaults and a configurable target. Use it as the building block for overlay primitives (dialogs, popovers, toasts) that must escape parent overflow/stacking contexts; the target defaults to the teleportTarget from ConfigProvider (body unless overridden).

Source

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  Teleport,
} from '@robonen/primitives/utilities/teleport';

<Teleport />

API Reference

Teleport

Root

Renders its slot content into a different part of the DOM (a portal), wrapping Vue's built-in `<Teleport>` with SSR-safe defaults and a configurable target. Use it as the building block for overlay primitives (dialogs, popovers, toasts) that must escape parent overflow/stacking contexts; the target defaults to the `teleportTarget` from `ConfigProvider` (`body` unless overridden).

Prop	Type	Default	Description
`to`?	`string \| HTMLElement \| null`	—	Target DOM node or CSS selector. When `null`/`undefined`, Vue's built-in `<Teleport>` is rendered with its default behavior (body).
`defer`?	`boolean`	`false`	Defer teleport rendering until after the parent has mounted. Useful when the target node is rendered by the same component tree.
`disabled`?	`boolean`	`false`	Disable teleport — children render in place. SSR-safe default.
`forceMount`?	`boolean`	`true`	Forcibly keep children mounted even when Teleport is disabled/removed. Opt-in escape hatch for animation-aware primitives.