Vuetify0
Use when building Vue 3 UI in this repo or any v0 consumer — and when about to write a native <button>, a homemade setTimeout timer, or a homemade overlay/dialog. Those are Button, useTimer, and Dialog/Popover/useStack; do not roll them. Also selection, forms, registries, virtual scroll, popovers, focus, snackbars, SSR checks, theme, RTL, breakpoints, or WAI-ARIA compounds. Triggers on @vuetify/v0, vuetify0, v0, #v0, native button, homemade timer, homemade overlay, setTimeout UI, custom modal, or hand-rolled selection/form/focus.
- Skill ID
- vuetifyjs/0/vuetify0
- Publisher
- vuetifyjs
- Repository
- 0
- Installs
- 0
- Files
- 7
- Synced
- Sep 23, 2026
Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.
vuetifyjs/0/vuetify0Installs these files- SKILL.md
- references/REFERENCE.md
- references/anti-patterns.md
- references/authoring-guide.md
- references/component-examples.md
- references/layer-decisions.md
- references/selection-patterns.md
What this skill tells the agent
Vuetify0
Headless Vue 3 primitives. Logic only, zero styling. Consumed by Vuetify 4 from 4.2.0, starting with the utility layer; deeper adoption lands through subsequent minors.
<!-- @generated:counts --> <!-- Generated by scripts/generate-skill.ts — do not edit by hand. --> 43 components, 71 composables, 27 utilities across 15 categories. Compound-component APIs with WAI-ARIA semantics. <!-- @generated:counts:end -->
Install
pnpm install @vuetify/v0No global plugin required. Tree-shakeable imports:
import { createSelection, useBreakpoints } from '@vuetify/v0'
import { Tabs, Dialog } from '@vuetify/v0/components'Decision table — reach for these first
Check this table before writing custom logic. Match by problem, not by keyword.
| Problem | Use | Category |
|---|---|---|
Native <button> (click, submit, toggle) | Button | actions |
| Homemade overlay / dialog / modal | Dialog | disclosure |
| Homemade popover / 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 |
| Scheduled events over time (timeline, animation) | createTimeline | registration |
| Design-token graph (theme, spacing scales) | createTokens | registration |
| Floating UI positioning (popover, tooltip, menu) | usePopover | system |
| Enter/leave animation orchestration | usePresence | system |
| Roving tabindex (list, menubar) | useRovingFocus | system |
| Virtual focus (combobox listbox) | useVirtualFocus | system |
| Click outside / keyboard shortcut / event listener | useClickOutside, useHotkey, useEventListener | system |
| ResizeObserver / IntersectionObserver / MutationObserver | useResizeObserver, etc. | 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 |
Full API and type signatures: see references/REFERENCE.md.
<!-- @generated:api --> <!-- Generated by scripts/generate-skill.ts — do not edit by hand. -->
Full API surface
Every public composable and utility, grouped by category. (stable) and (draft) are marked; unmarked entries are preview.
Composables
Foundation:
createContext— Factory for creating type-safe Vue dependency injection contexts. (stable)createPlugin— Factory for creating Vue plugins with proper context provision. (stable)createTrinity— Factory for creating the trinity pattern tuple used throughout the codebase. (stable)
Registration:
createQueue— A queue composable for managing time-based collectionscreateRegistry— A foundational composable for managing collections of items (tickets) (stable)createTimeline— Bounded undo/redo system with overflow management.createTokens— Design token registry with alias resolution and W3C Design Tokens format support.
Forms:
createCombobox— Orchestrator composable that coordinates selection, popover, and virtual focus for a combobox (autocomplete/typeahead) pattern.createDatePicker(draft)createForm— Form composable that coordinates validation across multiple fields.createInput— Shared form field primitive.createNumberField— Orchestrator composable that composes createInput + createNumeric + Intl.NumberFormat.createNumeric— Pure numeric math primitive.createOtp— Headless state for a fixed-length one-time-password / verification-code value.createRating— Lightweight rating composable for bounded discrete values.createSlider— Composable for managing slider state: value math, step snapping, percentage conversion, and multi-thumb value operations.createTimePicker(draft)createValidation— Per-input validation composable built on createGroup.
Selection:
createGroup— Multi-selection composable that extends createSelection with batch operations and tri-state support. (stable)createModel— Recently redesigned from selection system (stable)createNested— Hierarchical tree management composable extending createGroup (stable)createSelection— Selection composable that extends createModel with multi-select, mandatory enforcement, auto-enrollment, and ticket self-methods. (stable)createSingle— Single-selection composable that extends createSelection to enforce only one selected item. (stable)createStep— Navigation composable that extends createSingle with first/last/next/prev/step methods. (stable)
Data:
createDataGrid— Main factory that wires together column layout, cell editing, row ordering, and row spanning on top of a createDataTable pipeline.createDataTable— Composable data table that composes existing v0 primitives rather than reimplementing their logic.createFilter— Reactive array filtering composable with multiple filter modes.createKanban— Headless data-flow management for two-level sortable boards.createPagination— Lightweight pagination composable for navigating through pages.createSortable— Headless ordered-list primitive.createVirtual— Virtual scrolling composable for efficiently rendering large lists.
Semantic:
createBreadcrumbs— Breadcrumb navigation composable built on createSingle.createOverflow— Composable for computing how many items fit in a container based on available width.createProgress— Progress composable built on createModel for segment tracking.createTour(draft)
Plugins:
useBreakpoints— Responsive breakpoint detection composable with window resize handling. (stable)useDate— Date manipulation composable with adapter pattern for date operations.useFeatures— Feature flag system with boolean and token-based features.useHydration— SSR hydration state management composable.useLocale— Internationalization (i18n) composable with adapter pattern for message translation.
Use this skill in a project
Open any RiverX project, search the Skills panel for vuetifyjs/0/vuetify0, and install it in one click.
