Vuetify — Material Design Component Framework for Vue

What Vuetify Does

• 80+ components — Button, DataTable, Dialog, Form inputs, Stepper, Snackbar
• Material Design 3 — aligned with Google guidelines
• Grid system — 12-column responsive layout
• Theming — light/dark + custom themes via SASS variables or runtime
• SSR — Nuxt module first-class
• i18n — built-in locale system
• Date pickers — multiple adapters (date-fns, Luxon, dayjs)
• Treeshaking — auto-import via vite-plugin-vuetify

Architecture

v3 rebuilt from scratch on Composition API with TypeScript. Styles ship as SASS + generated CSS; runtime theme via CSS variables. Uses provide/inject for ConfigProvider-style globals.

Self-Hosting

Client library.

Key Features

• 80+ components
• Material Design 3 aligned
• Runtime theming
• Built-in grid system
• Vue 3 Composition API
• TypeScript-first
• SSR (Nuxt) support
• Treeshakeable via plugin
• i18n + RTL support

Comparison

FAQ

Q: v2 vs v3？ A: v3 was rewritten specifically for Vue 3 + Composition API. v2 no longer receives new features. Migration requires updating imports and some props.

Q: What about bundle size? A: Enable autoImport: true with vite-plugin-vuetify; tree-shaking then bundles only the components you actually use.

Q: Custom themes? A: Use createVuetify({ theme: { themes: { light: { colors: { primary: "#1976d2" } } } } }), or override via CSS variables.

Sources & Credits

• Docs: https://vuetifyjs.com
• GitHub: https://github.com/vuetifyjs/vuetify
• License: MIT