Skip to main content

​
Installation

Get started with Vuetify by creating a new project or adding it to an existing Vue application.

​
Quick project scaffolding

The fastest way to get started is using the official Vuetify scaffolding tool. Choose your preferred package manager and run the corresponding command: 
pnpm create vuetify
The scaffolding tool will guide you through creating a new project with Vuetify pre-configured and ready to use.

​
Manual installation

If you prefer to add Vuetify to an existing project, follow these steps:
1

Install the package

Add Vuetify to your project using your package manager:
pnpm add vuetify
2

Import styles and create Vuetify instance

In your main entry file (typically main.ts or main.js), import Vuetify styles and create a Vuetify instance:
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import App from './App.vue'

const vuetify = createVuetify({
  // Configuration options
})

const app = createApp(App)
app.use(vuetify)
app.mount('#app')
3

Configure your build tool (optional)

For automatic component imports and tree-shaking, install the Vuetify plugin for your build tool:
pnpm add -D vite-plugin-vuetify
Then configure it in your build config:
vite.config.ts
import vuetify from 'vite-plugin-vuetify'

export default {
  plugins: [
    vuetify({ autoImport: true })
  ]
}

​
Framework integration

​
Nuxt

For Nuxt projects, use the official Vuetify Nuxt module for seamless integration with auto-imports and SSR support. Visit the official Vuetify installation guide for detailed Nuxt setup instructions.

​
Laravel

Vuetify works great with Laravel and Inertia.js. After creating your Laravel project with Vue, follow the manual installation steps above to add Vuetify. Visit the official Vuetify installation guide for detailed Laravel integration steps.

​
TypeScript support

Vuetify has full TypeScript support built-in. When using TypeScript, ensure your project includes the types:
tsconfig.json
{
  "compilerOptions": {
    "types": ["vuetify"]
  }
}

​
Next steps

Now that Vuetify is installed, check out the quick start guide to build your first component.

Build docs developers (and LLMs) love

Get started for freeTalk to us