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 Page as Markdown

BeginnerJan 23, 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.

Tip

Use the Skill Filter to narrow down navigation to match your experience 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 zero (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')

Info

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

Requirements

Vue 3.5.0 or higher
Node 22+

Quick Start

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.Root v-model="expanded" multiple>
    <ExpansionPanel.Item value="item-1">
      <ExpansionPanel.Activator>
        Section 1
      </ExpansionPanel.Activator>

      <ExpansionPanel.Content>
        Content for section 1
      </ExpansionPanel.Content>
    </ExpansionPanel.Item>
  </ExpansionPanel.Root>
</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 3

v0 works with Nuxt 3 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, useForm } from '@vuetify/v0/composables'

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

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