Name: vuetify0
Author: vuetifyjs

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

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 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. 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 through createContext . <! @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](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](references/REFERENCE.md) Selection patterns: [references/selection patterns.md](references/selection patterns.md) Anti patterns: [references/anti patterns.md](references/anti patterns.md) Component vs composable: [references/layer decisions.md](references/layer decisions.md) Authoring a compound: [references/authoring guide.md](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: createDataGrid — A headless data grid with column layout, cell editing, row ordering, and row spanning. createDataTable — Composable data table built on v0 primitives. Composes sorting, filtering, pagination, selection, and expansion into a single pipeline. createFilter — A composable for filtering arrays of items based on search queries, supporting both primitive values and complex objects with customizable filtering logic. createKanban — Two level board state for columns of cards, with column reorder, in column reorder, and a cross column transfer primitive. createPagination — A lightweight composable for managing pagination state with navigation methods and computed visible page items. createSortable — Ordered list state with move , swap , and reorder mutations. createVirtual — Virtual scrolling composable for efficiently rendering large lists by only rendering visible items. Semantic: createBreadcrumbs — A composable that extends createSingle for breadcrumb navigation with automatic path truncation. createOverflow — Computes how many items fit in a container based on available width, for responsive truncation in pagination, breadcrumbs, and similar UIs. createProgress — A composable for tracking progress across one or more segments, with percentage computation and indeterminate state detection. Plugins: useBreakpoints — Reac