usePresence
Animation-agnostic mount lifecycle management.
Usage
The usePresence composable implements a state machine that controls when content should be in the DOM. It handles lazy mounting, enter/exit timing, and cleanup — without opinion on how animation happens.
ts
import { usePresence } from '@vuetify/v0'
import { shallowRef } from 'vue'
const isOpen = shallowRef(false)
const { isMounted, isPresent, isLeaving, state, done } = usePresence({
present: isOpen,
lazy: true,
immediate: false,
})
// isMounted — controls v-if (true during mounted, present, and leaving)
// state — 'unmounted' | 'mounted' | 'present' | 'leaving'
// done() — call when exit animation finishesOptions
| Option | Type | Default | Notes |
|---|---|---|---|
present | MaybeRefOrGetter<boolean> | — | Required. Drives visibility — when truthy, content enters; when falsy, begins leaving |
lazy | boolean | false | Delay first mount until present is true for the first time |
immediate | boolean | true | Auto-resolve the leaving state on the next tick if done() is not called. Set to false for JS-driven animations that need full timing control |
Architecture
Reactivity
| Property | Type | Description |
|---|---|---|
state | Ref<PresenceState> | Current lifecycle state |
isMounted | Ref<boolean> | Whether content should be in the DOM |
isPresent | Ref<boolean> | Whether content is logically active |
isLeaving | Ref<boolean> | Whether an exit is in progress |
done | () => void | Signal that exit animation is complete |
Examples
FAQ
usePresence with lazy: true subsumes useLazy’s deferred rendering behavior. The isMounted ref is equivalent to hasContent, and the state machine replaces the manual onAfterLeave callback pattern.
When immediate: true (default), if done() isn’t called within a microtask of entering the leaving state, Presence auto-resolves to unmounted. This is the fast path for content without exit animations. Set immediate: false for JS-driven animations where you need full control over timing.
The following API details are for the usePresence composable.
Was this page helpful?