Vuetify0

Headless Vue 3 components and composables. Behavior and ARIA only.

48 components, 74 composables, 27 utilities.

Install

pnpm install @vuetify/v0

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

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.

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.