vuetify0

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

LICENSE.md

README.md

Audit 0.4.1 · source sha ef57db990121 · 21 Oct 2026Report an issue or request a re-scan

• Publishervuetifyjs GitHub organizationOwner of the repository this skill is read from
• Source foldervuetifyjs/0/skills/vuetify0The exact folder we audited
• LicenceNOASSERTIONAs the repository states it
• Commit pinned for this verdictef57db990121A new audit runs when the source changes
• Repository statusNot archivedPushed today
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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,…

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

```bash
pnpm install @vuetify/v0
```

```ts
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.

```vue
<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

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-21
   ✓SAFE B 89 / 100

   first audit · source ef57db990121

Questions about vuetify0

• github.com/vuetifyjs/0/tree/master/skills/vuetify0 — the audited source at commit ef57db990121 and every finding aboveObserved · 21 Oct 2026

Spotted something wrong? Report a correction · Methodology