Skip to main content

​
Installation

Get started with Vuetify Zero by installing it in your Vue 3 project.

​
Requirements

Before installing, ensure your environment meets these requirements:
Vuetify Zero requires Node.js version 22 or higher. Check your version:
node --version
If you need to upgrade, download the latest LTS version from nodejs.org.
Vuetify Zero is built for Vue 3.5+ and takes advantage of the latest Vue features like defineModel and improved TypeScript support.
package.json
{
  "dependencies": {
    "vue": "^3.5.0"
  }
}
While not required, using pnpm >= 10.6 is recommended for monorepo projects:
npm install -g pnpm@latest

​
Install the Package

Choose your preferred package manager to install Vuetify Zero: 
npm install @vuetify/v0@latest
The @latest tag ensures you get the most recent version. Since the package is pre-1.0, APIs may change between minor versions.

​
Verify Installation

Verify that Vuetify Zero is installed correctly by checking your package.json:
package.json
{
  "dependencies": {
    "@vuetify/v0": "^0.1.5",
    "vue": "^3.5.0"
  }
}
You can also verify by importing a component in a Vue file:
App.vue
<script setup>
import { Atom } from '@vuetify/v0'
console.log('Vuetify Zero loaded:', Atom)
</script>

<template>
  <Atom as="div">
    Vuetify Zero is installed!
  </Atom>
</template>

​
Import Options

Vuetify Zero provides multiple import strategies to optimize your bundle size:

​
Full Import

Import everything from the main entry point: 
import { Dialog, Checkbox, createSelection } from '@vuetify/v0'
Use tree-shakeable subpath exports for optimal bundle size: 
import { Dialog, Checkbox, Tabs } from '@vuetify/v0/components'
Use subpath imports when you only need specific parts of the library. This can significantly reduce your bundle size.

​
TypeScript Configuration

For the best TypeScript experience, ensure your tsconfig.json includes:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "skipLibCheck": true,
    "types": ["vite/client"]
  }
}
Vuetify Zero is fully typed and exports all necessary TypeScript definitions. No separate @types package is needed.

​
Vite Configuration

If you’re using Vite, no special configuration is required. Vuetify Zero works out of the box:
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

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

​
Nuxt Configuration

For Nuxt 3 projects, Vuetify Zero works with auto-imports:
nuxt.config.ts
export default defineNuxtConfig({
  modules: [],
  vite: {
    optimizeDeps: {
      include: ['@vuetify/v0']
    }
  }
})
Then use components in your pages:
pages/index.vue
<script setup>
import { Dialog } from '@vuetify/v0'
</script>

<template>
  <Dialog.Root>
    <!-- Your dialog content -->
  </Dialog.Root>
</template>

​
Global Plugin Setup (Optional)

While Vuetify Zero components work standalone, you can configure global plugins for theme, locale, and other features:
main.ts
import { createApp } from 'vue'
import { createThemePlugin, createLocalePlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

// Optional: Add theme plugin
const theme = createThemePlugin({
  defaultTheme: 'light',
  themes: {
    light: { /* theme config */ },
    dark: { /* theme config */ }
  }
})

// Optional: Add locale plugin
const locale = createLocalePlugin({
  locale: 'en',
  messages: {
    en: { /* translations */ }
  }
})

app.use(theme)
app.use(locale)

app.mount('#app')
Plugins are optional. Most Vuetify Zero components work perfectly without any global configuration.

​
Troubleshooting

This usually means the package isn’t installed. Try:
rm -rf node_modules package-lock.json
npm install
Ensure you’re using Vue 3.5 or higher:
npm install vue@latest
Make sure your build tool supports ESM. For Vite, update to the latest version:
npm install vite@latest
Use the useHydration composable for SSR-safe operations:
import { useHydration } from '@vuetify/v0'

const { isHydrating, isHydrated } = useHydration()

​
Next Steps

Now that Vuetify Zero is installed, you’re ready to build your first component:

Quickstart Guide

Follow the quickstart guide to build your first component with Vuetify Zero

Build docs developers (and LLMs) love

Get started for freeTalk to us