/vuetify0

name: vuetify0
description: "Use when building Vue 3 UI with @vuetify/v0, or before hand-rolling behavior it already ships, such as a button, dialog, popover, setTimeout timer, selection, form, registry, virtual list, focus handling, snackbar, theme, RTL, breakpoints, an SSR window check, or a WAI-ARIA compound, along with the rest of its components, composables, and utilities."

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.

| 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 thro