Vuetify

Vuetify is a UI component framework for Vue, providing a large set of production-ready components and a theming system aimed at building consistent application UIs quickly.

What it is

• Vuetify — Vue UI component framework inspired by Material Design, with extensive component coverage and built-in theme support.

When Vuetify is a good fit

• You want a large, cohesive component library with consistent styling across an app.
• You need built-in theming (light/dark/system) and want to switch themes at runtime.
• You’re building on common Vue stacks (plain Vue + Vite, Nuxt, Laravel + Vite) and want well-documented integration paths.

Quickstart (new project)

Vuetify provides a scaffolding tool for generating a Vue + Vuetify project:

pnpm create vuetify

Add Vuetify to an existing Vue 3 project (minimal)

Install Vuetify, then initialize it as a Vue plugin:

pnpm i vuetify

import { createApp } from 'vue'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

import App from './App.vue'

const vuetify = createVuetify({ components, directives })

createApp(App).use(vuetify).mount('#app')

Caution

Importing all components/directives is convenient but not ideal for performance. Prefer the official Vite/Webpack plugins for automatic imports and better tree-shaking when possible.

Theming essentials

Vuetify ships with light, dark, and system themes and supports programmatic switching at runtime.

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'system', // 'system' | 'light' | 'dark'
  },
})

For runtime switching, use the useTheme() composable.

Nuxt notes

Nuxt projects typically need:

• vuetify + vite-plugin-vuetify
• build.transpile: ['vuetify']
• a Nuxt plugin that creates and registers Vuetify
• wrapping pages in v-app

Sources

• Vuetify — project overview and ecosystem entry points (accessed 2026-04-08)
• Why Vuetify? — high-level description of features and positioning (accessed 2026-04-08)
• Get started with Vuetify 4 — install paths, scaffolding, and integration snippets (accessed 2026-04-08)
• Theme configuration — theme API, defaults, switching, and configuration details (accessed 2026-04-08)