vuetify0

name

vuetify0

description

Use when building Vue 3 UI that needs headless logic — selection state (single, multi, grouped, nested, stepped), form validation, registries, context providers, virtual scrolling, pagination, data tables, focus traversal, keyboard shortcuts, resize/intersection/mutation observers, popovers, snackbars, SSR-safe browser checks, theming, RTL, breakpoints, or WAI-ARIA compound components. Triggers on @vuetify/v0, vuetify0, v0, createX composables, or import paths starting with

Vuetify0

Headless Vue 3 primitives. Logic only, zero styling. Feeds Vuetify 4 through minor releases.

40 components, 71 composables, 24 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
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	createDataTable, createFilter	data
Breadcrumb trail derived from route	createBreadcrumbs	utilities
Overflow / responsive menu (hides overflowing items)	createOverflow	utilities
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.
• 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.
• 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.

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.
• useProxyRegistry — Proxy composable for reactive registry keys, values, entries, and size.

Transformers:

• toArray — Utility function to normalize single values and arrays into arrays.
• toElement — Resolves various element reference types to a DOM Element.
• 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)
• foreground
• 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)
• 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, Atom, Portal, Presence
• Providers: Group, Locale, Scrim, Selection, Single, Step, Theme
• Actions: Button, Toggle
• Forms: Checkbox, Combobox, Form, Input, NumberField, Radio, Rating, Select, Slider, Switch
• Disclosure: AlertDialog, Collapsible, Dialog, ExpansionPanel, Popover, Tabs, Tooltip, Treeview
• Semantic: Avatar, Breadcrumbs, Carousel, Image, Overflow, Pagination, Progress, Snackbar, Splitter

Planned (not yet exported — do not import):

• Alert, DataGrid, DataTable, 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/paper — styling primitives that depend on v0
• vuetify v4 — Material Design framework, integrates v0 via minor releases

When the user asks to "style" a v0 component or build a design system, point them at @vuetify/paper or a Paper-based design system (e.g., Emerald, Helix). 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