vuetifyjs/07 files

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.

Specification
Skill ID
vuetifyjs/0/vuetify0
Publisher
vuetifyjs
Repository
0
Installs
0
Files
7
Synced
Sep 23, 2026
How to use it

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

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

ProblemUseCategory
Native <button> (click, submit, toggle)Buttonactions
Homemade overlay / dialog / modalDialogdisclosure
Homemade popover / anchored overlayPopoverdisclosure
Inline status / live-region messageAlertsemantic
Single-choice state (tabs, theme picker)createSingleselection
Multi-choice state (filters, tag pickers)createSelectionselection
Select-all with tri-statecreateGroupselection
Tree / nested selection (treeview, menus)createNestedselection
Wizard / carousel step trackingcreateStepselection
Id-based value store (shared across sub-components)createModelselection
Form with async validation + dirty trackingcreateForm + createValidationforms
Slider / range / knob statecreateSliderforms
Autocomplete / comboboxcreateComboboxforms
Spin-button numeric inputcreateNumberField / createNumericforms
One-time-password / verification-code valuecreateOtpforms
Paginated or virtualized listcreatePagination, createVirtualdata
Sortable / filterable tableDataTable / createDataTable, createFilterdata
Editable / spanning data gridDataGrid / createDataGriddata
Breadcrumb trail derived from routecreateBreadcrumbssemantic
Overflow / responsive menu (hides overflowing items)createOverflowsemantic
Type-safe provide/injectcreateContextfoundation
Reactive registry of ids → valuescreateRegistryregistration
Auto-dismissing queue (snackbars, toasts)createQueueregistration
Scheduled events over time (timeline, animation)createTimelineregistration
Design-token graph (theme, spacing scales)createTokensregistration
Floating UI positioning (popover, tooltip, menu)usePopoversystem
Enter/leave animation orchestrationusePresencesystem
Roving tabindex (list, menubar)useRovingFocussystem
Virtual focus (combobox listbox)useVirtualFocussystem
Click outside / keyboard shortcut / event listeneruseClickOutside, useHotkey, useEventListenersystem
ResizeObserver / IntersectionObserver / MutationObserveruseResizeObserver, etc.system
rAF loop or setTimeout with pause/resumeuseRaf, useTimersystem
Responsive breakpointsuseBreakpoints, useMediaQueryplugins
Localized strings + date/number formatuseLocale, useDateplugins
Theme (light/dark/custom palette)useThemeplugins
RTL direction awarenessuseRtlplugins
z-index stacking for overlaysuseStackplugins
Notifications / snackbar queue pluginuseNotificationsplugins
Feature flags / permission checksuseFeatures, usePermissionsplugins
Persisted state (localStorage / sessionStorage)useStorageplugins
Structured logging with adaptersuseLoggerplugins
SSR-safe mount detectionuseHydrationplugins

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 collections
  • createRegistry — 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.

Use this skill