Global setup

Four singletons. Mount each once, anywhere in your app, and every other component reaches it automatically.

Powers every v-tooltip. Without one mounted, tooltips silently never appear.

<template>
  <TooltipHost />
  <YourApp />
</template>

It takes the same options every individual tooltip can override:

Props

Name	Type	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	Fallbacks for targets whose v-tooltip value doesn't specify them.
`openDelay`	`number \| undefined`	Delay before a cold open, ms. Warm-group opens are always instant.
`closeDelay`	`number \| undefined`	Grace period after the pointer leaves, ms — long enough to travel onto the tooltip.
`beforeClose`	`((done: () => void) => void) \| undefined`	Global default for every v-tooltip target; override per-target with `v-tooltip="{ beforeClose }"`.
`forceMount`	`boolean \| undefined`	Global default for every v-tooltip target; override per-target with `v-tooltip="{ forceMount }"`.
`ui`	`Partial<{ positioner: UiPartValue; panel: UiPartValue; }> \| undefined`	Per-instance part-class/style overrides.

DialogHost

Renders whatever openDialog() or confirmAction() creates imperatively. Not needed for a <Dialog v-model:open> in your own template. No props, no configuration.

<template>
  <DialogHost />
  <YourApp />
</template>

Renders whatever openPopover() or confirmAction() with surface: 'popover' creates imperatively. Not needed for a <Popover v-model:open> in your own template. No props, no configuration.

<template>
  <PopoverHost />
  <YourApp />
</template>

Toaster

Renders whatever toast() creates. Has real configuration, so it keeps its own page.

<template>
  <Toaster />
  <YourApp />
</template>

All together

Mount all four once, wherever your app's root template lives:

<script setup lang="ts">
import { DialogHost, PopoverHost, Toaster, TooltipHost } from 'vael-ui'
</script>

<template>
  <TooltipHost />
  <DialogHost />
  <PopoverHost />
  <Toaster />
  <YourApp />
</template>