@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:

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

What's Included

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

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)

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

``bash collapse # Install dependencies pnpm install # Start playground pnpm dev # Start documentation site pnpm dev:docs # Run tests pnpm test # Type check pnpm typecheck # Lint pnpm lint ``

Contributing

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

License

MIT License