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

Beginner Jun 1, 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 v0 starter project.

Tip

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

Skill Level

Manual Setup

To add v0 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.

Requirements

Vue 3.5.0 or higher
Node 22+

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

v0 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

v0 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).

// 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'

Next Steps

Now that v0 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
Explore interactively	Playground

Tip

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

Support v0

v0 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 ↗