vuetifyjs/0/vuetify0

Vuetify0

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

<!-- @generated:counts --> <!-- Generated by scripts/generate-skill.ts — do not edit by hand. --> 48 components, 74 composables, 27 utilities. <!-- @generated:counts:end -->

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>

<!-- @generated:components --> <!-- Generated by scripts/generate-skill.ts — do not edit by hand. --> 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

<!-- @generated:components:end -->

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

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

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: