vuetify0

name

vuetify0

description

Build with @vuetify/v0 headless composables and components for Vue 3. Use when creating selection state (single, multi, grouped, stepped), form validation, tab/dialog/popover UI, provide/inject context, registries, virtual scrolling, pagination, keyboard shortcuts, resize observers, theming, breakpoints, or SSR-safe browser detection. Triggers on v0, vuetify0, headless components, or WAI-ARIA patterns.

Vuetify0 - Headless Composables & Components

Transform Vue 3 apps with unstyled, logic-focused building blocks for design systems.

Quick Start

pnpm install @vuetify/v0

No global plugin required. Import only what you need:

import { createSelection } from '@vuetify/v0/composables'
import { Tabs } from '@vuetify/v0/components'

Core Decision Tree

Before writing custom logic, check if v0 already provides it:

Need	Use	Guide
Single item selection	createSingle	Single selection patterns
Multi-item selection	createSelection	Multi selection patterns
Selection with "select all"	createGroup	Group patterns
Step wizard / carousel	createStep	Stepper patterns
Form validation	createForm	Form patterns
Shared state (provide/inject)	createContext	Context patterns
Browser utilities	See utilities	Browser & DOM patterns

Full API reference: See REFERENCE.md

Component Architecture

All components are headless (unstyled) and follow WAI-ARIA patterns:

<script setup>
import { Tabs } from '@vuetify/v0/components'
</script>

<template>
  <Tabs.Root v-model="active">
    <Tabs.List>
      <Tabs.Item value="overview">Overview</Tabs.Item>
    </Tabs.List>
    <Tabs.Panel value="overview">Content</Tabs.Panel>
  </Tabs.Root>
</template>

Available components: Dialog, Tabs, ExpansionPanel, Checkbox, Radio, Popover, Pagination

Component examples: See component-examples.md

Essential Patterns

Selection State

// Single selection (tabs, theme picker)
const single = createSingle({ mandatory: 'force' })

// Multi-selection (tags, filters)
const selection = createSelection({ multiple: true })

// Group with "select all" (data tables)  
const group = createGroup()

Context Sharing

// Type-safe provide/inject
const [useTheme, provideTheme] = createContext<Theme>('Theme')

Form Validation

const form = createForm()
form.register({ id: 'email', rules: [required, email] })

Anti-Patterns

Don't reinvent these wheels:

❌ Custom selection logic → Use createSelection ❌ Manual provide/inject → Use createContext ❌ SSR checks → Use IN_BROWSER constant

Detailed anti-patterns: See anti-patterns.md

Development Tools

Generate common patterns:

python scripts/scaffold_pattern.py --type selection --output ./composables

Check for anti-patterns:

python scripts/check_patterns.py ./src

Vuetify MCP for structured API access:

claude mcp add vuetify-mcp https://mcp.vuetifyjs.com/mcp

Resources

• Detailed examples: references/component-examples.md
• Advanced patterns: references/advanced-patterns.md
• Migration guide: references/migration-guide.md
• Full API: references/REFERENCE.md
• Live docs: https://0.vuetifyjs.com