@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: This package is in early development (pre-1.0). APIs may change between minor versions.

Repository Structure

This is a pnpm monorepo containing:

| Package | Description | |---------|-------------| | @vuetify/v0 | Core headless components and composables | | @vuetify/paper | Styling and layout primitives | | apps/docs | Documentation site (0.vuetifyjs.com) | | apps/playground | Interactive development environment |

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

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

| Component | Description | |-----------|-------------| | AspectRatio | Fixed width-to-height ratio container via CSS aspect-ratio | | Atom | Polymorphic base element with dynamic as prop and renderless mode | | Portal | Teleport wrapper with automatic z-index stacking via useStack | | Presence | Animation-agnostic mount lifecycle with lazy mounting and exit timing |

Providers

| Component | Description | |-----------|-------------| | Group | Multi-selection with tri-state support | | Locale | Locale context provider for internationalization | | Scrim | Overlay backdrop with click-to-dismiss and z-index management | | Selection | Multi-selection state with v-model binding | | Single | Single-selection with automatic deselection | | Step | Sequential navigation (first, last, next, prev) | | Theme | Theme context provider with CSS variable injection |

Actions

| Component | Description | |-----------|-------------| | Button | Button with loading grace period, toggle groups, and icon accessibility | | Toggle | Pressable on/off button with standalone and group modes |

Forms

| Component | Description | |-----------|-------------| | Checkbox | Dual-mode checkbox (standalone/group) with tri-state support | | Combobox | Filterable selection with autocomplete, virtual focus, and custom input | | Form | Form validation coordinator with submit handling and error aggregation | | Input | Text input with label, description, error messages, and character counting | | NumberField | Numeric input with increment/decrement, scrub, and Intl formatting | | Radio | Radio group with single-selection and keyboard navigation | | Select | Dropdown selection with virtual focus and multi-select support | | Rating | Star/icon rating with hover preview, half-stars, and keyboard navigation | | Slider | Range input with snapping, range mode, and custom tracks | | Switch | Toggle switch with on/off states and label association |

Disclosure

| Component | Description | |-----------|-------------| | AlertDialog | Confirmation dialog with deferred close and wait()/close() pattern | | Collapsible | Single-item disclosure toggle for showing and hiding content | | Dialog | Modal dialog using native <dialog> with focus management | | ExpansionPanel | Accordion-style collapsible panels | | Popover | CSS anchor-positioned popup content | | Tabs | Tab panel navigation with keyboard support and lazy content rendering | | Treeview | Hierarchical tree with nested selection and expand/collapse |

Semantic

| Component | Description | |-----------|-------------| | Avatar | Image/fallback avatar with priority loading | | Breadcrumbs | Navigation breadcrumbs with overflow detection and truncation | | Carousel | Scroll-snap slide navigation with multi-slide display and drag/swipe | | Image | Image with placeholder, error fallback, and lazy loading | | Overflow | Responsive truncation primitive with overflow detection and indicator | | Pagination | Page navigation with semantic <nav> wrapper | | Snackbar | Toast notification with queue, positioning, and auto-dismiss | | Splitter | Resizable panel layout with drag handles |

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

Data

• 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

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

Reactivity

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

Utilities

• createBreadcrumbs - Breadcrumb navigation model with depth tracking and path traversal
• createOverflow - Container overflow measurement for item capacity

Transformers

• toArray - Array transformation utilities
• toElement - Normalize refs, selectors, and elements to DOM elements
• toReactive - Reactive object conversion

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

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

v0 is in alpha — open for feedback, bug reports, and contributions. See the Alpha 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.