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:

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