@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/storybook	Component stories and visual testing
playground	Interactive development environment

Requirements

• Node.js >= 22
• 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

Component	Description
Atom	Polymorphic base element. Renders as any HTML element via as prop with renderless mode support
Avatar	Image with fallback display. Compound component with Root, Image, and Fallback sub-components
Breadcrumbs	Responsive navigation trail with overflow support. Root, List, Item, Link, Page, Divider, Ellipsis sub-components
Checkbox	Standalone or group checkbox with tri-state. Root, Group, SelectAll, Indicator, HiddenInput sub-components
Dialog	Modal dialog using native <dialog>. Root, Activator, Content, Title, Description, Close sub-components
ExpansionPanel	Accordion/collapsible panels. Supports single (accordion) or multi-expand modes
Group	Multi-selection with tri-state support. Provides selectAll, unselectAll, toggleAll
Pagination	Page navigation with ellipsis. Root, Item, First, Prev, Next, Last, Ellipsis, Status sub-components
Popover	CSS anchor-positioned popup. Root, Anchor, and Content sub-components
Radio	Radio button group with single-selection. Group, Root, Indicator, HiddenInput sub-components
Scrim	Backdrop/scrim overlay for overlay systems
Selection	Generic single/multi-selection. Configurable via multiple prop
Single	Single-selection specialization of Selection
Step	Navigation/stepper with first, last, next, prev controls
Tabs	Accessible tab interface. Root, List, Item, Panel sub-components

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
• createDataTable - Data table with sort, filter, pagination, row selection, grouping, and adapter pattern

Selection

Selection management composables built on createRegistry:

• createSelection - Base selection with Set-based tracking
• createGroup - Multi-selection with tri-state/mixed support
• createSingle - Single-selection specialization
• createStep - Navigation through items (first, last, next, prev)
• createBreadcrumbs - Breadcrumb navigation model with depth tracking, truncation, and path traversal
• createNested - Hierarchical tree management with parent-child relationships and open state

Forms

• createForm - Form validation and state management with async rules

Reactivity

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

Utilities

• useFilter - Reactive array filtering with multiple modes
• usePagination - Lightweight page navigation (non-registry based)
• useVirtual - Virtual scrolling for large lists
• useOverflow - Container overflow measurement for item capacity

Transformers

• toArray - Array transformation utilities
• toReactive - Reactive object conversion

System

• useClickOutside - Click outside detection with cleanup
• useEventListener - Lifecycle-managed event listeners
• useHotkey - Hotkey combinations and sequences
• 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
• useResizeObserver - Resize observer utilities
• useToggleScope - Conditional effect scope management

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)
• usePermissions - RBAC/ABAC permission system
• 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

We are not currently accepting external contributions. Check back later or join our Discord community for updates.

License

MIT License

---

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