In this repo, import internals from #v0/ (#v0/composables, #v0/utilities, #v0/constants/globals). Published imports are @vuetify/v0, @vuetify/v0/components, @vuetify/v0/utilities, and @vuetify/v0/constants.

Most use* composables run without a plugin and fall back to defaults. useDate does not: install createDatePlugin with an adapter, or the call throws. For app-wide theme, locale, storage, or breakpoints, install createThemePlugin, createLocalePlugin, createStoragePlugin, or createBreakpointsPlugin.

Selection and a button. Neither needs a plugin.

<script setup lang="ts">
  import { createSelection } from '@vuetify/v0'
  import { Button } from '@vuetify/v0/components'

  const filters = createSelection({ multiple: true })

  filters.register({ id: 'open' })
</script>

<template>
  <Button.Root @click="filters.toggle('open')">
    {{ filters.selectedIds.has('open') ? 'Open' : 'Closed' }}
  </Button.Root>
</template>

Decision table

Match the first column. If a row fits, use that API. The rows are the usual cases. The rest of the components, composables, and utilities are listed at the end of this skill.

Problem	Use	Category
Native `<button>` (click, submit, toggle)	`Button`	actions
Overlay, dialog, or modal	`Dialog`	disclosure
Popover or 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
Undo/redo history	`createTimeline`	registration
Design-token graph (theme, spacing scales)	`createTokens`	registration
Popover, tooltip, or menu position	`usePopover`	system
Enter/leave animation orchestration	`usePresence`	system
Focus containment (non-native dialog, drawer)	`useFocusTrap`	system
Roving tabindex (list, menubar)	`useRovingFocus`	system
Virtual focus (combobox listbox)	`useVirtualFocus`	system
Click outside / keyboard shortcut / event listener	`useClickOutside`, `useHotkey`, `useEventListener`	system
Resize, intersection, or mutation observation	`useResizeObserver`, `useIntersectionObserver`, `useMutationObserver`	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

Rules

Utilities

Check these before writing a helper. In-repo: #v0/utilities. Published: @vuetify/v0/utilities.

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

Browser checks

IN_BROWSER, SUPPORTS_TOUCH, SUPPORTS_MATCH_MEDIA, SUPPORTS_OBSERVER, SUPPORTS_INTERSECTION_OBSERVER, SUPPORTS_MUTATION_OBSERVER.

In-repo: #v0/constants/globals. Published: @vuetify/v0/constants. Use these instead of typeof window.

Reactivity

shallowRef for primitives
ref for objects and arrays
toRef for derived values
computed only to cache expensive work

Compound components

Root owns the state. Children are named sub-components and read it through createContext.

<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, Otp, Radio (stable), Rating, Select, Slider, Switch (stable)
Disclosure: AlertDialog, Collapsible (stable), Dialog, ExpansionPanel, Menu, Popover, Tabs (stable), Tooltip, Tour, Treeview
Semantic: Alert, Avatar, Breadcrumbs, Carousel, Image, Overflow, Pagination, Progress, Snackbar, Splitter
Data: DataGrid, DataTable, Kanban, Virtualizer

Planned (not yet exported — do not import):

DatePicker, DateRangePicker, TimePicker

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

Vuetify MCP

When the Vuetify MCP server is connected, use it for a guide or a release note:

vuetify-mcp:get_vuetify0_component_list
vuetify-mcp:get_vuetify0_composable_list
vuetify-mcp:get_vuetify0_component_guide
vuetify-mcp:get_vuetify0_composable_guide
vuetify-mcp:get_vuetify0_installation_guide

Resources

Docs: https://0.vuetifyjs.com
API reference: references/REFERENCE.md
Selection patterns: references/selection-patterns.md
Anti-patterns: references/anti-patterns.md
Component vs composable: references/layer-decisions.md
Authoring a compound: references/authoring-guide.md

Full API surface

Public composables and utilities. (mature), (stable), and (draft) are marked. Unmarked entries are preview.

Composables

Foundation:

createContext — Type-safe dependency injection factory built on Vue's provide/inject. Shares state across component trees without prop drilling. (stable)
createPlugin — Factory for creating Vue plugins with typed dependency injection and lifecycle hooks. (stable)
createTrinity — Generates a typed [useX, provideX, defaultX] tuple for Vue's provide/inject dependency injection pattern. (stable)

Registration:

createQueue — FIFO queue for time-based collections with automatic timeout removal and pause/resume support.
createRegistry — Foundation for ordered, keyed collections. Items are registered with IDs and indexes, and can be looked up by ID, index, or value. (stable)
createTimeline — Bounded undo/redo history built on createRegistry with a configurable size limit.
createTokens — Design token registry with hierarchical collections, alias resolution, and namespace support.

Forms:

createCombobox — Low-level combobox coordinator for custom implementations. Most users should use the Combobox component instead.
createDatePicker — Headless date state with calendar-grid geometry, single-date and range modes, preset ranges, min/max bounds, and disabled-date rules. Composable-first, without an @internationalized/date dependency. (draft)
createForm — Coordinates validation across multiple inputs. Provides submit(), reset(), and aggregate validity state.
createInput — Shared form field primitive with validation state, ARIA ID generation, and automatic form registration.
createNumberField — Numeric value with locale-aware formatting, step snapping, min/max/step bounds, and parse/commit for text input.
createNumeric — Pure numeric math for bounded values with step snapping, range clamping, and floating-point precision correction.
createOtp — Fixed-length one-time-password or verification-code value with pattern-gated entry and completion detection.
createRating — Bounded number with discrete items. Give it a size, get items to iterate with full/half/empty state. Half-step support for 0.5 increments.
createSlider — Slider state composable for single-thumb, range, and multi-thumb sliders. Handles value math, step snapping, and percentage conversion.
createTimePicker — Segmented time value with hour, minute, and second fields, 12/24-hour modes, meridiem handling, step snapping, and min/max bounds. (draft)
createValidation — Per-input validation with reactive rules, async validation, and Standard Schema support.

Selection:

createGroup — Multi-selection with tri-state (mixed/indeterminate) support for checkbox trees, grouped toggles, and any pattern where items can be partially selected. (stable)
createModel — Reactive value store that wraps a ref with two-way selection binding. (stable)
createNested — Hierarchical tree management built on createGroup, with parent-child relationships, open/close state, and pluggable traversal strategies. (stable)
createSelection — A composable for managing the selection of items in a collection with automatic indexing and lifecycle management. (stable)
createSingle — Extends createSelection to enforce single-item selection, automatically clearing the previous selection. (stable)
createStep — Extends createSingle with bounded or circular navigation. Built for wizards, multi-step forms, and onboarding flows. (stable)

Data:

createDataGrid — A headless data grid with column layout, cell editing, row ordering, and row spanning.
createDataTable — Composable data table built on v0 primitives. Composes sorting, filtering, pagination, selection, and expansion into a single pipeline.
createFilter — A composable for filtering arrays of items based on search queries, supporting both primitive values and complex objects with customizable filtering logic.
createKanban — Two-level board state for columns of cards, with column reorder, in-column reorder, and a cross-column transfer primitive.
createPagination — A lightweight composable for managing pagination state with navigation methods and computed visible page items.
createSortable — Ordered-list state with move, swap, and reorder mutations.
createVirtual — Virtual scrolling composable for efficiently rendering large lists by only rendering visible items.

Semantic:

createBreadcrumbs — A composable that extends createSingle for breadcrumb navigation with automatic path truncation.
createOverflow — Computes how many items fit in a container based on available width, for responsive truncation in pagination, breadcrumbs, and similar UIs.
createProgress — A composable for tracking progress across one or more segments, with percentage computation and indeterminate state detection.

Plugins:

useBreakpoints — Reactive viewport detection for building responsive layouts with named breakpoints. (stable)
useDate — Date manipulation using the Temporal API with locale-aware formatting and adapter support.
useFeatures — Manage feature flags and variations across your application.
useHydration — Control SSR hydration timing to prevent mismatches and optimize client-side rendering.
useLocale — i18n plugin with message translation, number formatting, and locale switching.
useLogger — Application logging with configurable levels, filtering, and swappable adapters for popular logging libraries.
useNotifications — Notification lifecycle management with severity levels, state mutations, toast queuing, and auto-dismiss.
usePermissions — Role-based access control with actions, subjects, and context-aware conditions.
useReducedMotion — Respect or override the user's prefers-reduced-motion setting, with a reactive flag and a body data attribute for CSS-only consumers.
useRtl — Right-to-left text direction management with reactive state and subtree overrides.
useRules — Validation rule management with Standard Schema support and custom aliases.
useStack — Overlay z-index coordinator with automatic stacking order and parent-child nesting support.
useStorage — Reactive storage with automatic serialization, caching, and SSR-safe operations. (stable)
useTheme — Theme management with multiple themes, CSS custom properties, and token alias resolution. (stable)
useTooltip — Shares tooltip open/close/skip delay defaults across a region, so nearby tooltips open instantly once one is already open.
useTour — Headless guided-tour sequencer: step collection, activator registry, form-gated navigation, programmatic activate/deactivate, and per-step enter/leave/completed handlers plus events. Built on createStep, createRegistry, and createForm.

System:

useClickOutside — A composable for detecting clicks outside of specified element(s) with automatic cleanup.
useDelay — Schedule open and close transitions with start, stop, pause, and resume controls and a reactive view of the pending delay.
useDragDrop — Headless drag-and-drop primitive. Owns two registries — draggables and zones — plus the active-drag state.
useEventListener — A composable for handling DOM events with automatic cleanup on component unmount.
useFocusTrap — Confines Tab and Shift+Tab to a root element, focuses into it on activate, and restores the previously focused element on deactivate.
useHotkey — A composable for handling hotkey combinations and sequences with platform-aware modifiers and automatic cleanup.
useImage — Tracks image loading state as a reactive state machine with idle, loading, loaded, and error states.
useIntersectionObserver — A composable for detecting when elements enter or leave the viewport using the Intersection Observer API with automatic cleanup. (stable)
useLazy — A composable for deferring content rendering until first activation, with optional reset on deactivation.
useMediaQuery — A composable for reactive CSS media query matching with automatic cleanup.
useMutationObserver — A composable for detecting DOM changes using the Mutation Observer API with automatic cleanup. (stable)
usePopover — Native popover API with a pluggable positioning adapter. Defaults to CSS-anchor positioning; swap in FloatingUIPopoverAdapter (or any PopoverAdapter) per instance or app-wide via createPopoverPlugin.
usePresence — Animation-agnostic mount lifecycle management.
useRaf — Throttles callbacks to the next animation frame with cancel-then-request deduplication. Cleans up automatically on scope disposal.
useResizeObserver — A composable for detecting element size changes using the Resize Observer API with automatic cleanup. (stable)
useRovingFocus — Keyboard navigation for composite widgets where arrow keys move focus between items, skipping disabled ones.
useTimer — A reactive timer composable with pause/resume support and remaining time tracking.
useToggleScope — A composable for conditionally managing Vue effect scopes based on reactive boolean conditions with automatic cleanup.
useTypeahead — Prefix-matches typed characters against a list, accumulates them for one second, and cycles on a repeated letter.
useVirtualFocus — A composable for keyboard navigation where DOM focus stays on a single control element while a visual highlight moves across items.

Reactivity:

useProxyModel — A composable for syncing refs bidirectionally with selection contexts, enabling seamless v-model integration with selection state. (stable)
useProxyRegistry — A reactive proxy wrapper for registry collections that automatically updates refs when items are registered or unregistered.

Transformers:

toArray — Coerces any value — including null and undefined — to an array. (stable)
toElement — Resolves refs, getters, raw DOM elements, or Vue component instances to a single Element | undefined. (stable)
toHighlight — Splits text into matched and unmatched chunks, returning a plain HighlightChunk[] for search-term highlighting.
toReactive — Converts a MaybeRef object to a reactive proxy with automatic ref unwrapping and Map/Set support.

Utilities

apca
clamp — Clamps a value between a minimum and maximum (stable)
findMatchRanges — Finds match ranges of a query in a string, optionally folding accents on either side.
foreground
getActiveElement — Walks open shadow roots to the deepest focused element. Returns null under SSR.
hexToRgb
isArray — Checks if a value is an array (mature)
isBoolean — Checks if a value is a boolean (mature)
isElement — Checks if a value is a DOM Element (mature)
isFunction — Checks if a value is a function (mature)
isNaN — Checks if a value is NaN (Not a Number) (mature)
isNull — Checks if a value is null (mature)
isNullOrUndefined — Checks if a value is null or undefined (mature)
isNumber — Checks if a value is a number (mature)
isObject — Checks if a value is a plain object (excludes null and arrays) (mature)
isPrimitive — Checks if a value is a primitive (string, number, or boolean) (stable)
isString — Checks if a value is a string (mature)
isSymbol — Checks if a value is a symbol (mature)
isThenable — Checks if a value is a thenable (any object with a .then method).
isUndefined — Checks if a value is undefined (mature)
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, returning a caller-supplied fallback when the length does not parse.
range — Creates an array of sequential numbers (mature)
rgbToHex
useId — Generates a unique ID, using Vue's useId when in component context (stable)
V0Error — Structured error thrown by v0 internals.

vuetify0

Vuetify0

Install