Composables
Type-safe composables for headless UI. Components wrap these composables—you can use either approach.
Minimal Reactivity
Vuetify0 composables use the absolute minimum reactivity required to fulfill their responsibilities. This deliberate constraint keeps bundle sizes small, maximizes performance, and gives you full control over what triggers updates.
See Benchmarks for performance data and what the size ratings mean.
What’s Reactive
| Category | Reactive | Why |
|---|---|---|
Selection state (selectedIds, selectedId) | UI must reflect selection changes | |
Registry collections (values(), keys()) | Read-heavy, rarely needs live updates | |
| Registry size | Computed on access, not tracked | |
| Queue/Timeline data | Consumed via events or polling |
Events as Opt-In Reactivity
Registries emit events when operations occur. Use events to build reactive behavior only where needed:
import { createRegistry } from '@vuetify/v0'
const registry = createRegistry({ events: true })
// Listen for changes
registry.on('register:ticket', ticket => {
console.log('Added:', ticket.id)
})
registry.on('unregister:ticket', ticket => {
console.log('Removed:', ticket.id)
})Available events:
register:ticket— Item addedunregister:ticket— Item removedupdate:ticket— Item modified viaupsert()clear:registry— All items removedreindex:registry— Indices recalculated
useProxyRegistry for Full Reactivity
When you need automatic template updates for registry data, wrap it with useProxyRegistry:
import { createRegistry, useProxyRegistry } from '@vuetify/v0'
const registry = createRegistry()
// Non-reactive: template won't update when items change
const items = registry.values()
// Reactive: changes trigger template updates automatically
const proxy = useProxyRegistry(registry)
// proxy.values is a computed ref that updates on any mutationThis pattern lets you choose reactivity granularity—pay for what you use
Foundation
Core factories that provide the foundation for all other composables.
| Name | Description |
|---|---|
| createContext | Create reusable context to share state across components |
| createPlugin | Create Vue plugins with standardized patterns |
| createTrinity | Create context provider/consumer pattern utilities |
Registration
Collection management and data structure primitives.
| Name | Description |
|---|---|
| createRegistry | Foundation for registration-based systems |
| createQueue | Time-based queue management with automatic timeouts |
| createTimeline | Bounded undo/redo system with fixed-size history |
| createTokens | Design token management system |
Selection
State management for single and multi-selection patterns.
| Name | Description |
|---|---|
| createSelection | General selection state management |
| createSingle | Single-selection with automatic deselection |
| createGroup | Multi-selection with tri-state support |
| createStep | Sequential navigation for wizards and steppers |
Forms
Form state management and model binding utilities.
| Name | Description |
|---|---|
| createForm | Form state management and validation |
Reactivity
Reactive proxy utilities for bridging state.
| Name | Description |
|---|---|
| useProxyModel | Bridge selection context to v-model binding |
| useProxyRegistry | Proxy-based registry with automatic reactivity |
System
Browser API wrappers with automatic lifecycle cleanup.
| Name | Description |
|---|---|
| useClickOutside | Detect clicks outside an element |
| useEventListener | Handle DOM events with automatic cleanup |
| useHotkey | Handle hotkey combinations and sequences |
| useIntersectionObserver | Intersection Observer API for visibility detection |
| useMediaQuery | Reactive CSS media query matching |
| useMutationObserver | Mutation Observer API for DOM change detection |
| useResizeObserver | Resize Observer API for element size changes |
| useToggleScope | Conditional effect scope management |
Plugins
Application-level features installable via Vue plugins.
| Name | Description |
|---|---|
| useBreakpoints | Responsive breakpoint detection |
| useDate | Date manipulation with Temporal API and locale-aware formatting |
| useFeatures | Feature flags and A/B testing |
| useHydration | SSR hydration management |
| useLocale | Internationalization system |
| useLogger | Logging system with multiple adapters |
| usePermissions | Role-based access control |
| useStorage | Reactive browser storage interface |
| useTheme | Theme management with CSS custom properties |
Utilities
Standalone helpers for common UI patterns.
| Name | Description |
|---|---|
| useFilter | Filter arrays based on search queries |
| useOverflow | Compute item capacity for responsive truncation |
| usePagination | Pagination state with navigation methods |
| useVirtual | Virtual scrolling for large lists |
Transformers
Value transformation utilities.
| Name | Description |
|---|---|
| toArray | Convert any value to an array |
| toReactive | Convert MaybeRef objects to reactive proxies |