Get started with Vuetify0

Vuetify0 provides headless UI primitives and composables for Vue 3. Components are unstyled and logic-focused, giving you complete control over styling while handling accessibility, keyboard navigation, and state management.

Edit this page

Report a Bug

Copy Markdown

BeginnerSep 6, 2026

Quick Start

The fastest way to start a new Vuetify0 project is with the CLI.

Vuetify Create

Standalone scaffolding tool for Vuetify0 projects using Vuetify Create↗︎.

bash

pnpm create vuetify0

bash

npm create vuetify0

bash

yarn create vuetify0

bash

bun create vuetify0

Vuetify CLI

Full-featured CLI with additional presets and options using Vuetify CLI.

bash

pnpm dlx @vuetify/cli init --type vuetify0

bash

npx @vuetify/cli init --type vuetify0

bash

yarn dlx @vuetify/cli init --type vuetify0

bash

bunx @vuetify/cli init --type vuetify0

Both options scaffold a complete project with UnoCSS, theming, and example components pre-configured — the same shape as DevKey, the reference Vuetify0 starter project.

Tip

Use the Skill Filter to narrow down navigation to match your experience level:

Skill Level

Not sure? Take a quiz

Manual Setup

To add Vuetify0 to an existing project, follow the steps below.

Create Vue Project

bash

pnpm create vue@latest

bash

npm create vue@latest

bash

yarn create vue

bash

bun create vue@latest

Installation

Install @vuetify/v0 with your preferred package manager:

bash

pnpm add @vuetify/v0

bash

npm install @vuetify/v0

bash

yarn add @vuetify/v0

bash

bun add @vuetify/v0

Create a plugin file to configure v0:

src/plugins/vuetify0.ts

import { createThemePlugin } from '@vuetify/v0'
import type { App } from 'vue'

export default function vuetify0 (app: App) {
  app.use(
    createThemePlugin({
      default: 'light',
      themes: {
        light: {
          dark: false,
          colors: {
            primary: '#3b82f6',
            surface: '#ffffff',
            'on-primary': '#ffffff',
            'on-surface': '#212121',
          },
        },
      },
    }),
  )
}

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import vuetify0 from './plugins/vuetify0'

const app = createApp(App)

vuetify0(app)

app.mount('#app')

Note

For additional plugins, theming options, and advanced configuration, see the Guide.

Seed Working Examples

Vuetify0 is headless: installing @vuetify/v0 and importing a component gives you logic, accessibility, and state management — but no rendered UI. To start with a working, styled example you can edit and ship, use vuetify add to pull from the docs registry↗︎:

bash

# Interactive picker
pnpm dlx @vuetify/cli add

# Seed a Dialog example
pnpm dlx @vuetify/cli add dialog

# Seed a composable plugin
pnpm dlx @vuetify/cli add use-theme

bash

npx @vuetify/cli add
npx @vuetify/cli add dialog
npx @vuetify/cli add use-theme

bash

yarn dlx @vuetify/cli add
yarn dlx @vuetify/cli add dialog
yarn dlx @vuetify/cli add use-theme

bash

bunx @vuetify/cli add
bunx @vuetify/cli add dialog
bunx @vuetify/cli add use-theme

The CLI writes example files into your project, installs any missing dependencies, and records the install in vuetify.json so you can diff or refresh later.

Tip

See the Vuetify CLI guide for the full command list, registry options, and vuetify.json tracking.

Requirements

Vue 3.5.0 or higher
Node 22+ recommended for app tooling. Developing Vuetify0 itself requires Node 26+ (see Contributing).

Usage

Import and use components directly - no plugin installation required:

vue

<script setup lang="ts">
  import { ExpansionPanel } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const expanded = shallowRef([])
</script>

<template>
  <ExpansionPanel.Group v-model="expanded" multiple>
    <ExpansionPanel.Root value="item-1">
      <ExpansionPanel.Activator>
        Section 1
        <ExpansionPanel.Cue />
      </ExpansionPanel.Activator>

      <ExpansionPanel.Content>
        Content for section 1
      </ExpansionPanel.Content>
    </ExpansionPanel.Root>
  </ExpansionPanel.Group>
</template>

Components are completely unstyled. Add your own classes using Tailwind, UnoCSS, or plain CSS.

Styling

Vuetify0 is style-agnostic. Choose your preferred CSS framework and map theme colors to v0’s CSS variables.

UnoCSS

UnoCSS↗︎ is our recommended choice for its speed and flexibility.

1. Install

bash

pnpm add -D unocss @unocss/preset-wind

bash

npm install -D unocss @unocss/preset-wind

bash

yarn add -D unocss @unocss/preset-wind

bash

bun add -D unocss @unocss/preset-wind

2. Configure

uno.config.ts

import { defineConfig, presetWind } from 'unocss'

export default defineConfig({
  presets: [presetWind()],
  theme: {
    colors: {
      primary: 'var(--v0-primary)',
      surface: 'var(--v0-surface)',
      'on-primary': 'var(--v0-on-primary)',
      'on-surface': 'var(--v0-on-surface)',
      // Add more theme colors as needed
    },
  },
})

3. Add Vite Plugin

vite.config.ts

import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
  ],
})

4. Import Styles

src/main.ts

import 'virtual:uno.css'

Now use utility classes in your components:

vue

<template>
  <button class="bg-primary text-on-primary px-4 py-2 rounded">
    Click me
  </button>
</template>

Tailwind CSS v4

Tailwind v4↗︎ uses CSS-first configuration with native cascade layers.

1. Install

bash

pnpm add -D tailwindcss @tailwindcss/vite

bash

npm install -D tailwindcss @tailwindcss/vite

bash

yarn add -D tailwindcss @tailwindcss/vite

bash

bun add -D tailwindcss @tailwindcss/vite

2. Add Vite Plugin

vite.config.ts

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

3. Create Stylesheet

src/styles/main.css

@import "tailwindcss";

@theme {
  --color-primary: var(--v0-primary);
  --color-surface: var(--v0-surface);
  --color-on-primary: var(--v0-on-primary);
  --color-on-surface: var(--v0-on-surface);
}

4. Import Styles

src/main.ts

import './styles/main.css'

Now use utility classes in your components:

vue

<template>
  <button class="bg-primary text-on-primary px-4 py-2 rounded">
    Click me
  </button>
</template>

CSS Modules

Vue’s built-in CSS Modules↗︎ require zero configuration.

vue

<template>
  <button :class="$style.btn">
    Click me
  </button>
</template>

<style module>
  .btn {
    background: var(--v0-primary);
    color: var(--v0-on-primary);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>

Type-safe access via useCssModule():

vue

<script setup lang="ts">
  import { useCssModule } from 'vue'

  const $style = useCssModule()
</script>

<template>
  <button :class="$style.btn">Click me</button>
</template>

Tip

For dark mode, custom themes, and design tokens, see the Theming Guide.

Nuxt

Vuetify0 works with Nuxt via a standard plugin.

1. Create Plugin

plugins/vuetify0.ts

import { createThemePlugin } from '@vuetify/v0'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(
    createThemePlugin({
      default: 'light',
      themes: {
        light: {
          dark: false,
          colors: {
            primary: '#3b82f6',
            surface: '#ffffff',
            'on-primary': '#ffffff',
            'on-surface': '#212121',
          },
        },
        dark: {
          dark: true,
          colors: {
            primary: '#60a5fa',
            surface: '#1e1e1e',
            'on-primary': '#1a1a1a',
            'on-surface': '#e0e0e0',
          },
        },
      },
    }),
  )
})

2. Configure Nuxt

nuxt.config.ts

export default defineNuxtConfig({
  build: {
    transpile: ['@vuetify/v0'],
  },
})

Tip

For auto-imports, SSR hydration, and theme persistence, see the Nuxt Guide.

Exposed Exports

The following export paths exist for the Vuetify0 framework:

Name	Description
`@vuetify/v0`	Main entry point exposing all components, composables, and utilities.
`@vuetify/v0/components`	Components only.
`@vuetify/v0/composables`	Composables only.
`@vuetify/v0/utilities`	Utilities only.
`@vuetify/v0/constants`	Constants only (not included in main entry).
`@vuetify/v0/locale/messages/en`	Optional canonical English aria-string map for component accessible names. Never imported by the runtime.

// Everything
import { ExpansionPanel, createSelection } from '@vuetify/v0'

// Components only
import { ExpansionPanel, Single, Group } from '@vuetify/v0/components'

// Composables only
import { createSelection, useTheme, createForm } from '@vuetify/v0/composables'

// Utilities only
import { isObject, isString } from '@vuetify/v0/utilities'

// Constants only
import { IN_BROWSER } from '@vuetify/v0/constants'

Agents

Click the portrait to copy John’s identity into Grok Bot↗︎. Setup prompts live on Agents.

Next Steps

Now that Vuetify0 is installed, choose your path:

Goal	Start Here
Understand the architecture	Components → Composables → Core
Build production UIs now	Theming → Accessibility
Build a component library	Building Frameworks
Seed styled examples	Vuetify CLI (`vuetify add`)
Set up an AI agent	Agents → AI Tools
Explore interactively	Playground

Tip

Use Cmd+/ on any documentation page to ask AI questions about Vuetify0.

Take a tour on: Using Search

Find exactly what you need in seconds with search, favorites, and keyboard shortcuts.

Support Vuetify0

Vuetify0 is built and maintained in the open. If it’s useful to you or your team, sponsoring funds the work and keeps it moving — and need a hand shipping? The Services page covers direct support plans and fixed-scope project builds.

Sponsor

Fund Vuetify0, get your logo on the docs

For companies whose product is built on Vuetify0. Logo across the docs, every page, and the README. One sponsor at a time.

$2,000/mo

Learn more

Discord

Need help? Join our community for support and discussions ↗