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.

43 components, 71 composables, 27 utilities across 15 categories. Compound-component APIs with WAI-ARIA semantics.

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.

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 fixed-length one-time-password / verification-code value.
• createRating — Lightweight rating composable for bounded discrete values.
• createSlider — Composable for managing slider state: value math, step snapping, percentage conversion, and multi-thumb value operations.
• createTimePicker (draft)
• createValidation — Per-input validation composable built on createGroup.

Selection:

• createGroup — Multi-selection composable that extends createSelection with batch operations and tri-state support. (stable)
• createModel — Recently redesigned from selection system (stable)
• createNested — Hierarchical tree management composable extending createGroup (stable)
• createSelection — Selection composable that extends createModel with multi-select, mandatory enforcement, auto-enrollment, and ticket self-methods. (stable)
• createSingle — Single-selection composable that extends createSelection to enforce only one selected item. (stable)
• createStep — Navigation composable that extends createSingle with first/last/next/prev/step methods. (stable)

Data:

• createDataGrid — Main factory that wires together column layout, cell editing, row ordering, and row spanning on top of a createDataTable pipeline.
• createDataTable — Composable data table that composes existing v0 primitives rather than reimplementing their logic.
• createFilter — Reactive array filtering composable with multiple filter modes.
• createKanban — Headless data-flow management for two-level sortable boards.
• createPagination — Lightweight pagination composable for navigating through pages.
• createSortable — Headless ordered-list primitive.
• createVirtual — Virtual scrolling composable for efficiently rendering large lists.

Semantic:

• createBreadcrumbs — Breadcrumb navigation composable built on createSingle.
• createOverflow — Composable for computing how many items fit in a container based on available width.
• createProgress — Progress composable built on createModel for segment tracking.
• createTour (draft)

Plugins:

• useBreakpoints — Responsive breakpoint detection composable with window resize handling. (stable)
• useDate — Date manipulation composable with adapter pattern for date operations.
• useFeatures — Feature flag system with boolean and token-based features.
• useHydration — SSR hydration state management composable.
• useLocale — Internationalization (i18n) composable with adapter pattern for message translation.
• useLogger — Logging composable with adapter pattern supporting console, consola, and pino.
• useNotifications — Notification management composable built on createRegistry and createQueue.
• usePermissions — Permission management composable with support for RBAC and ABAC patterns.
• useReducedMotion — Reduced-motion plugin composable for respecting or overriding the prefers-reduced-motion media query.
• useRtl — RTL (right-to-left) direction composable with adapter pattern.
• useRules — Validation rule composable with Standard Schema support.
• useStack — Overlay z-index stacking composable
• useStorage — Reactive storage composable with adapter pattern for localStorage, sessionStorage, or memory. (stable)
• useTheme — Theme management composable with token resolution and CSS variable injection. (stable)
• useTooltip — Region-scoped tooltip coordination plugin.

System:

• useClickOutside — Detects clicks outside of specified element(s) with automatic cleanup.
• useDelay — Schedule open and close transitions with configurable delays.
• useDragDrop — Headless drag-and-drop primitive.
• useEventListener — Event listener composable with automatic cleanup on scope disposal.
• useHotkey — Hotkey listener composable with key combination and sequence support.
• useImage — Image loading state machine with deferred loading support.
• useIntersectionObserver — IntersectionObserver composable with lifecycle management. (stable)
• useLazy — Deferred content rendering composable for performance optimization.
• useMediaQuery — Reactive media query composable with automatic cleanup.
• useMutationObserver — MutationObserver composable with lifecycle management. (stable)
• usePopover — Composable for native popover API behavior with CSS anchor positioning.
• usePresence — Animation-agnostic mount lifecycle composable.
• useRaf — Scope-disposed safe requestAnimationFrame composable.
• useResizeObserver — ResizeObserver composable with lifecycle management. (stable)
• useRovingFocus — Roving tabindex composable for keyboard navigation within composite widgets.
• useTimer — A reactive timer composable with pause/resume support.
• useToggleScope — Conditionally manages an effect scope based on a reactive boolean condition.
• useVirtualFocus — Virtual focus composable for aria-activedescendant keyboard navigation.

Reactivity:

• useProxyModel — Proxy composable for bidirectional sync between a model context and v-model. (stable)
• useProxyRegistry — Proxy composable for reactive registry keys, values, entries, and size.

Transformers:

• toArray — Utility function to normalize single values and arrays into arrays. (stable)
• toElement — Resolves various element reference types to a DOM Element. (stable)
• toHighlight — Pure transformer — no DOM, no state, no registry, no reactivity.
• toReactive — Utility function to convert values and refs into reactive proxies with ref unwrapping.

Utilities

Utilities:

• apca
• clamp — Clamps a value between a minimum and maximum (stable)
• findMatchRanges — Finds [start, end] index pairs where query occurs in text, optionally folding accents on either side.
• foreground
• getActiveElement — Resolve the deepest focused element, piercing open shadow roots.
• hexToRgb
• isArray — Checks if a value is an array (stable)
• isBoolean — Checks if a value is a boolean (stable)
• isElement — Checks if a value is a DOM Element (stable)
• isFunction — Checks if a value is a function (stable)
• isNaN — Checks if a value is NaN (Not a Number) (stable)
• isNull — Checks if a value is null (stable)
• isNullOrUndefined — Checks if a value is null or undefined (stable)
• isNumber — Checks if a value is a number (stable)
• isObject — Checks if a value is a plain object (excludes null and arrays) (stable)
• isPrimitive — Checks if a value is a primitive (string, number, or boolean) (stable)
• isString — Checks if a value is a string (stable)
• isSymbol — Checks if a value is a symbol (stable)
• isThenable — Checks if a value is a thenable (any object with a .then method).
• isUndefined — Checks if a value is undefined (stable)
• isV0Error — Type guard for v0-thrown errors.
• mergeDeep — Deeply merges source objects into a target object, returning a new object (stable)
• pxToNumber — Parses a CSS pixel length into a number
• range — Creates an array of sequential numbers (stable)
• rgbToHex
• useId — Generates a unique ID, using Vue's useId when in component context (stable)
• V0Error — Structured error thrown by v0 internals.

Compound-component pattern

All components are headless and compound. Root owns state, children are named sub-components.

<script setup lang="ts">
  import { Tabs } from '@vuetify/v0/components'
  import { shallowRef } from 'vue'

  const active = shallowRef('overview')
</script>

<template>
  <Tabs.Root v-model="active">
    <Tabs.List>
      <Tabs.Item value="overview">Overview</Tabs.Item>
      <Tabs.Item value="details">Details</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="overview">Overview content</Tabs.Panel>
    <Tabs.Panel value="details">Details content</Tabs.Panel>
  </Tabs.Root>
</template>

Available components:

• Primitives: AspectRatio (stable), Atom (stable), Portal, Presence
• Providers: Group (stable), Locale, Scrim, Selection (stable), Single (stable), Step (stable), Theme (stable)
• Actions: Button, Toggle (stable)
• Forms: Checkbox (stable), Combobox, Form, Input, NumberField, Radio (stable), Rating, Select, Slider, Switch (stable)
• Disclosure: AlertDialog, Collapsible (stable), Dialog, ExpansionPanel, Popover, Tabs (stable), Tooltip, Treeview
• Semantic: Alert, Avatar, Breadcrumbs, Carousel, Image, Overflow, Pagination, Progress, Snackbar, Splitter
• Data: DataGrid, DataTable

Planned (not yet exported — do not import):

• DatePicker, DateRangePicker, Kanban, Otp, TimePicker, Tour, Virtualizer

More compound examples: see references/component-examples.md.

Must-read rules

1. Check utilities before writing helpers

Import from #v0/utilities (internal) or @vuetify/v0 (external):

• Type guards: isFunction, isString, isNumber, isBoolean, isObject, isArray, isNull, isUndefined, isNullOrUndefined, isPrimitive, isSymbol, isNaN, isElement
• Data: mergeDeep, clamp, range, useId

2. Check globals before SSR branches

Import from #v0/constants/globals:

• IN_BROWSER — replaces typeof window !== 'undefined'
• SUPPORTS_TOUCH, SUPPORTS_MATCH_MEDIA, SUPPORTS_OBSERVER, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MUTATION_OBSERVER

3. Reactivity defaults

• shallowRef for primitives
• ref for objects/arrays
• toRef for derived values (default)
• computed only when caching expensive work

4. Compound components only

Sub-components talk to the root via createContext. Never prop-drill state between siblings. Never build a monolithic component when the root + sub-component pattern fits.

Detailed anti-patterns: see references/anti-patterns.md.

Paper and Vuetify relationship

• @vuetify/v0 — headless (this skill)
• vuetify v4 — Material Design framework; takes @vuetify/v0 as a runtime dependency from 4.2.0, starting with the utility layer (type guards, range, toHighlight). Composables and components are not yet consumed; deeper adoption lands through subsequent 4.x minors.

When the user asks to "style" a v0 component or build a design system, point them at a Paper design system (Emerald, Genesis, Bulma) — that is how styling is layered on top of headless v0. Keep v0 itself headless.

Vuetify MCP

For live API schemas, guides, and release notes, prefer the Vuetify MCP server over guessing:

claude mcp add vuetify-mcp https://mcp.vuetifyjs.com/mcp

Useful tools (fully qualified names required):

• vuetify-mcp:get_vuetify0_component_list — all components with categories
• vuetify-mcp:get_vuetify0_composable_list — all composables with categories
• vuetify-mcp:get_vuetify0_component_guide — guide for a named component
• vuetify-mcp:get_vuetify0_composable_guide — guide for a named composable
• vuetify-mcp:get_vuetify0_installation_guide — installation + bootstrap

Resources

• Live docs: https://0.vuetifyjs.com
• API reference: references/REFERENCE.md
• Selection patterns (single, multi, group, nested, step): references/selection-patterns.md
• Component compound patterns: references/component-examples.md
• Anti-patterns and migrations: references/anti-patterns.md
• Layer decisions (component vs composable vs both): references/layer-decisions.md
• Authoring guide (build a new compound component): references/authoring-guide.md