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.
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 finishesArchitecture
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 |
Questions
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.
Functions
usePresence
(options: UsePresenceOptions) => UsePresenceReturnAnimation-agnostic mount lifecycle management.
Options
immediate
boolean | undefinedAuto-resolve LEAVING state next tick if done() not called.
Default: true