/vuetify0

name: vuetify0
description: "Use when building Vue 3 UI in this repo or any v0 consumer — and when about to write a native <button>, a homemade setTimeout timer, or a homemade overlay/dialog. Those are Button, useTimer, and Dialog/Popover/useStack; do not roll them. Also selection, forms, registries, virtual scroll, popovers, focus, snackbars, SSR checks, theme, RTL, breakpoints, or WAI-ARIA compounds. Triggers on @vuetify/v0, vuetify0, v0, #v0, native button, homemade timer, homemade overlay, setTimeout UI, custom modal, or hand-rolled selection/form/focus."

Vuetify0

Headless Vue 3 primitives. Logic only, zero styling. Consumed by Vuetify 4 from 4.2.0, starting with the utility layer; deeper adoption lands through subsequent minors.

<!-- @generated:counts --> <!-- Generated by scripts/generate-skill.ts — do not edit by hand. --> **43 components, 71 composables, 27 utilities** across 15 categories. Compound-component APIs with WAI-ARIA semantics. <!-- @generated:counts:end -->

Install

pnpm install @vuetify/v0

No global plugin required. Tree-shakeable imports:

import { createSelection, useBreakpoints } from '@vuetify/v0'
import { Tabs, Dialog } from '@vuetify/v0/components'

Decision table — reach for these first

Check this table **before writing custom logic**. Match by problem, not by keyword.

| Problem | Use | Category | |---|---|---| | Native `<button>` (click, submit, toggle) | `Button` | actions | | Homemade overlay / dialog / modal | `Dialog` | disclosure | | Homemade popover / anchored overlay | `Popover` | disclosure | | Inline status / live-region message | `Alert` | semantic | | Single-choice state (tabs, theme picker) | `createSingle` | selection | | Multi-choice state (filters, tag pickers) | `createSelection` | selection | | Select-all with tri-state | `createGroup` | selection | | Tree / nested selection (treeview, menus) | `createNested` | selection | | Wizard / carousel step tracking | `createStep` | selection | | Id-based value store (shared across sub-components) | `createModel` | selection | | Form with async validation + dirty tracking | `createForm` + `createValidation` | forms | | Slider / range / knob state | `createSlider` | forms | | Autocomplete / combobox | `createCombobox` | forms | | Spin-button numeric input | `createNumberField` / `createNumeric` | forms | | One-time-password / verification-code value | `createOtp` | forms | | Paginated or virtualized list | `createPagination`, `createVirtual` | data | | Sortable / filterable table | `DataTable` / `createDataTable`, `createFilter` | data | | Editable / spanning data grid | `DataGrid` / `createDataGrid` | data | | Breadcrumb trail derived from route | `createBreadcrumbs` | semantic | | Overflow / responsive menu (hides overflowing items) | `createOverflow` | semantic | | Type-safe provide/inject | `createContext` | foundation | | Reactive registry of ids → values | `createRegistry` | registration | | Auto-dismissing queue (snackbars, toasts) | `createQueue` | registration | | Scheduled events over time (timeline, animation) | `createTimeline` | registration | | Design-token graph (theme, spacing scales) | `createTokens` | registration | | Floating UI positioning (popover, tooltip, menu) | `usePopover` | system | | Enter/leave animation orchestration | `usePresence` | system | | Roving tabindex (list, menubar) | `useRovingFocus` | system | | Virtual focus (combobox listbox) | `useVirtualFocus` | system | | Click outside / keyboard shortcut / event listener | `useClickOutside`, `useHotkey`, `useEventListener` | system | | ResizeObserver / IntersectionObserver / MutationObserver | `useResizeObserver`, etc. | system | | rAF loop or setTimeout with pause/resume | `useRaf`, `useTimer` | system | | Responsive breakpoints | `useBreakpoints`, `useMediaQuery` | plugins | | Localized strings + date/number format | `useLocale`, `useDate` | plugins | | Theme (light/dark/custom palette) | `useTheme` | plugins | | RTL direction awareness | `useRtl` | plugins | | z-index stacking for overlays | `useStack` | plugins | | Notifications / snackbar queue plugin | `useNotifications` | plugins | | Feature flags / permission checks | `useFeatures`, `usePermissions` | plugins | | Persisted state (localStorage / sessionStorage) | `useStorage` | plugins | | Structured logging with adapters | `useLogger` | plugins | | SSR-safe mount detection | `useHydration` | plugins |

**Full API and type signatures:** see [references/REFERENCE.md](references/REFERENCE.md).

<!-- @generated:api --> <!-- Generated by scripts/generate-skill.ts — do not edit by hand. -->

Full API surface

Every public composable and utility, grouped by category. `(stable)` and `(draft)` are marked; unmarked entries are preview.

Composables

**Foundation:**

• `createContext` — Factory for creating type-safe Vue dependency injection contexts. (stable)
• `createPlugin` — Factory for creating Vue plugins with proper context provision. (stable)
• `createTrinity` — Factory for creating the trinity pattern tuple used throughout the codebase. (stable)

**Registration:**

• `createQueue` — A queue composable for managing time-based collections
• `createRegistry` — A foundational composable for managing collections of items (tickets) (stable)
• `createTimeline` — Bounded undo/redo system with overflow management.
• `createTokens` — Design token registry with alias resolution and W3C Design Tokens format support.

**Forms:**

• `createCombobox` — Orchestrator composable that coordinates selection, popover, and virtual focus for a combobox (autocomplete/typeahead) pattern.
• `createDatePicker` (draft)
• `createForm` — Form composable that coordinates validation across multiple fields.
• `createInput` — Shared form field primitive.
• `createNumberField` — Orchestrator composable that composes createInput + createNumeric + Intl.NumberFormat.
• `createNumeric` — Pure numeric math primitive.
• `createOtp` — Headless state for a f