vuetifyjs/0

@vuetify/v0

Headless Vue 3 UI primitives and composables for building modern applications and design systems. @vuetify/v0 is the foundation of the Vuetify ecosystem, offering lightweight, unstyled building blocks with full TypeScript support and accessibility features built-in.

Note: v0 is stable — v1.0.0 shipped July 22, 2026 and the stable API surface is locked under SemVer. Preview-level APIs (flagged in the roadmap) may still see documented changes.

Repository Structure

This is a pnpm monorepo containing:

Requirements

• Node.js >= 26
• pnpm >= 10.6
• Vue >= 3.5.0

Installation

npm install @vuetify/v0@latest
# or
pnpm add @vuetify/v0
# or
yarn add @vuetify/v0
# or
bun add @vuetify/v0

CLI

The Vuetify CLI scaffolds projects and seeds working examples from the docs registry.

Create a Project

pnpm create vuetify0
# or
pnpm dlx @vuetify/cli init

Seed Examples

v0 is headless — importing a component gives you logic and accessibility, not a rendered UI. Use vuetify add to pull a styled example from the docs registry into your project:

# Interactive picker
pnpm dlx @vuetify/cli add

# Seed a specific component
pnpm dlx @vuetify/cli add dialog

# Seed a composable plugin
pnpm dlx @vuetify/cli add use-theme

See the CLI guide for registry options, vuetify.json tracking, and the full command list.

Exports

The package provides tree-shakeable subpath exports:

import { ... } from '@vuetify/v0'            // Everything
import { ... } from '@vuetify/v0/components' // Components only
import { ... } from '@vuetify/v0/composables' // Composables only
import { ... } from '@vuetify/v0/utilities'  // Utilities only
import { ... } from '@vuetify/v0/types'      // Types only
import { ... } from '@vuetify/v0/constants'  // Constants only
import { ... } from '@vuetify/v0/date'       // Date adapter and utilities

What's Included

Components

Primitives

Providers

Actions

Disclosure

Forms

Data

Semantic

Composables

Foundation

Core factories that provide the foundation for all other composables:

• createContext - Type-safe Vue dependency injection wrapper
• createPlugin - Vue plugin factory with context provision
• createTrinity - Context triple pattern: [use, provide, default]

Registration

Base data structures that most other composables build upon:

• createRegistry - Enhanced Map with indexing, caching, and event support
• createQueue - FIFO queue with timeout management (notifications/toasts)
• createTimeline - Bounded undo/redo history
• createTokens - Design token registry with alias resolution

Selection

Selection management composables built on createRegistry:

• createSelection - Base selection with Set-based tracking
• createModel - Value store for single-value state
• createGroup - Multi-selection with tri-state/mixed support
• createSingle - Single-selection specialization
• createStep - Navigation through items (first, last, next, prev)
• createNested - Hierarchical tree management with parent-child relationships and open state

Forms

• createForm - Form validation and state management with async rules
• createInput - Shared form field state: validation, dirty/pristine, ARIA IDs
• createNumberField - Numeric input state with formatting, stepping, and validation
• createNumeric - Pure numeric math primitive: clamp, snap, step, percentage, and circular wrapping
• createOtp - OTP / verification code state with pattern-gated entry and decisional completion hook
• createValidation - Field-level validation with sync/async rules
• createCombobox - Combobox state management with filtering and virtual focus
• createRating - Bounded rating value with discrete items and half-step support
• createSlider - Slider state with snapping, range mode, and step control

Data

• createDataGrid - Headless data grid layering column layout, cell editing, row ordering, and row spanning on top of createDataTable
• createDataTable - Data table with sort, filter, pagination, row selection, grouping, and adapter pattern
• createFilter - Reactive array filtering with multiple modes
• createKanban - Two-level sortable orchestrator (columns + items)
• createPagination - Lightweight page navigation
• createSortable - Ordered-list state with move / swap / reorder and a disabled mutation gate
• createVirtual - Virtual scrolling for large lists

Semantic

• createBreadcrumbs - Breadcrumb navigation model with depth tracking and path traversal
• createOverflow - Container overflow measurement for item capacity
• createProgress - Progress state with multi-segment and buffer tracking

Reactivity

• useProxyModel - Bridge selection context to component v-model
• useProxyRegistry - Convert registry Map to reactive object

System

• useClickOutside - Click outside detection with cleanup
• useDelay - Schedule open and close transitions with configurable delays
• useDragDrop - Headless drag-and-drop primitive with two registries, pluggable adapters, and accessibility-first defaults
• useEventListener - Lifecycle-managed event listeners
• useHotkey - Hotkey combinations and sequences
• useImage - Image loading state machine with deferred loading and retry
• useIntersectionObserver - Intersection observer with auto-cleanup
• useLazy - Deferred content rendering for dialogs, menus, and tooltips
• useMediaQuery - Reactive CSS media query matching
• useMutationObserver - DOM mutation observation
• usePopover - Popover positioning and anchor management
• useRaf - requestAnimationFrame loop with start/stop control
• useResizeObserver - Resize observer utilities
• useRovingFocus - Roving tabindex keyboard navigation
• usePresence - Animation-agnostic mount lifecycle with lazy mounting and exit timing
• useTimer - Countdown and interval timer with pause/resume
• useToggleScope - Conditional effect scope management
• useVirtualFocus - Virtual focus management via aria-activedescendant

Plugins

Plugin-capable composables following the trinity pattern:

• useBreakpoints - Responsive breakpoint detection
• useDate - Date manipulation with adapter pattern and locale sync
• useFeatures - Feature flags with variations
• useHydration - SSR hydration helpers
• useLocale - Internationalization with message interpolation
• useLogger - Logging adapter (consola/pino/custom)
• useNotifications - Toast/snackbar queue management with positioning
• usePermissions - RBAC/ABAC permission system
• useReducedMotion - Respect or override the prefers-reduced-motion media query
• useRtl - Right-to-left text direction detection and management
• useRules - Validation rule adapter with built-in rule library
• useStack - Overlay z-index stacking with automatic scrim coordination
• useStorage - Storage adapter (localStorage/sessionStorage/memory)
• useTheme - Theme management with CSS variable injection
• useTooltip - Region-scoped tooltip delay coordination

Transformers

• toArray - Array transformation utilities
• toElement - Normalize refs, selectors, and elements to DOM elements
• toHighlight - Split text into matched and unmatched chunks for query highlighting
• toReactive - Reactive object conversion

Design Principles

• Headless First: Components provide logic and accessibility without imposed styling
• Slot-Driven: Maximum flexibility through comprehensive slot APIs
• CSS Variables: All styling configurable via --v0-* custom properties
• TypeScript Native: Full type safety with generics for extensibility
• Minimal Dependencies: Only Vue 3.5+ required (markdown libraries optional)
• Composable Architecture: Reusable logic through Vue 3 composables

Documentation

For detailed API documentation, examples, and guides, visit 0.vuetifyjs.com.

Development

# Install dependencies
pnpm install

# Start playground
pnpm dev

# Start documentation site
pnpm dev:docs

# Run tests
pnpm test

# Run tests (CI mode)
pnpm test:run

# Type check
pnpm typecheck

# Lint
pnpm lint:fix

# Full validation (lint + typecheck + test)
pnpm validate

Contributing

Vuetify0 is stable and open for bug reports, feature requests, and contributions. See the Roadmap for what's planned and how to get involved.

License

MIT License

Built with care for the Vue ecosystem. Part of the Vuetify family.