Skip to content

feat(useStack): add app-wide defaultTeleport option to createStackPlugin#603

Open
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:feat/usestack-default-teleport-553
Open

feat(useStack): add app-wide defaultTeleport option to createStackPlugin#603
sridhar-3009 wants to merge 1 commit into
vuetifyjs:masterfrom
sridhar-3009:feat/usestack-default-teleport-553

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Closes #553

Problem

Today the only way to teleport all Portals to a non-default target is per-component: every <SnackbarPortal to="top-layer" />, every Dialog, every Toast must opt in individually. There is no single place to configure the fallback for the whole app.

Solution

Add a default option to createStackPlugin (and to createStack/StackOptions):

app.use(createStackPlugin({ default: 'top-layer' }))

Portal reads stack.default as its fallback when no to prop is given, resolving the precedence chain:

per-component `to` prop  →  stack.default  →  'body'

'top-layer' is handled identically to the per-component case — it resolves to stack.topElement.value (the topmost open <dialog>) and falls back to 'body' when no modal is active.

Changes

  • StackOptions: new default?: Extensible<'top-layer'> | HTMLElement field
  • StackContext: new default: Readonly<Ref<…>> property
  • createStack(): extracts and wraps default in a toRef, exposes it on the returned context
  • Portal.vue: to prop destructured without a hardcoded 'body' default; target resolution now: to ?? stack.default.value ?? 'body'
  • Tests: createStack({ default }) exposes the value; createStackPlugin({ default }) flows through to useStack().default

…ifyjs#553)

Adds a `default` option to `StackOptions` / `createStackPlugin` so
an app can set a single app-wide Portal teleport target without
requiring every overlay to opt in via a per-component `to` prop:

```ts
app.use(createStackPlugin({ default: 'top-layer' }))
```

`Portal` reads `stack.default` as its fallback when no `to` prop is
provided, resolving the precedence chain:
  per-component `to` prop → `stack.default` → `'body'`

`'top-layer'` is handled the same as when passed directly as `to`:
it resolves to `stack.topElement.value` (the topmost open `<dialog>`)
and falls back to `'body'` when no modal is active.

Changes:
- `StackOptions.default?: Extensible<'top-layer'> | HTMLElement`
- `StackContext.default: Readonly<Ref<...>>` exposed on the context
- `Portal.vue`: `to` destructured without a default; target resolves
  via `to ?? stack.default.value ?? 'body'`
- Tests for `createStack({ default })` and plugin option flow-through
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ No changeset found

This PR changes packages/* source but has no changeset, so it won't be in the next release's version bump or notes. Add one:

pnpm changeset

Pick the affected package(s) — @vuetify/v0 carries @vuetify/paper automatically; @paper/genesis (and other @paper/* design systems) version separately — a bump type, and a short summary, then commit the generated .changeset/*.md. Docs-only, chore, or CI PRs can ignore this.

@johnleider johnleider added this to the v1.1.0 milestone Jul 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] createStackPlugin: app-wide defaultTeleport option

2 participants