# Vuetify — Material Design Component Framework for Vue

> Vuetify is the most popular Material Design component framework for Vue 3. 80+ beautifully crafted components following Material Design 3 guidelines with SSR support, theming, treeshaking, and accessibility baked in.

## Install

Save as a script file and run:

## Quick Use

```bash
npm create vuetify@latest
```

```ts
// main.ts
import { createApp } from "vue";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import "vuetify/styles";
import App from "./App.vue";

const vuetify = createVuetify({ components, directives });
createApp(App).use(vuetify).mount("#app");
```

```vue
<!-- App.vue -->
<template>
  <v-app>
    <v-main>
      <v-container>
        <v-card class="pa-4">
          <v-card-title>Welcome</v-card-title>
          <v-text-field label="Email" variant="outlined" />
          <v-btn color="primary">Sign In</v-btn>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>
```

## Intro

Vuetify is the most popular Material Design component framework for Vue. Created by John Leider and community-maintained, it provides 80+ components that follow the Material Design 3 guidelines exactly. Used by Siemens, Telus, and many enterprise Vue apps. Currently v3 targeting Vue 3.

- **Repo**: https://github.com/vuetifyjs/vuetify
- **Stars**: 40K+
- **Language**: TypeScript
- **License**: MIT

## 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

| Library | Design | Vue Version | Components |
|---|---|---|---|
| Vuetify | Material Design | 3 | 80+ |
| Element Plus | Desktop flat | 3 | 60+ |
| PrimeVue | Multi-theme | 3 | 90+ |
| Naive UI | Flat | 3 | 80+ |
| Quasar | Multi-platform | 3 | 70+ |

## 常见问题 FAQ

**Q: v2 vs v3？**
A: v3 专为 Vue 3 + Composition API 重写。v2 停止新功能开发。迁移需要改 import 和部分 props。

**Q: 打包体积？**
A: 用 `vite-plugin-vuetify` 开启 `autoImport: true`，tree-shake 只打包用到的组件。

**Q: 自定义主题？**
A: `createVuetify({ theme: { themes: { light: { colors: { primary: "#1976d2" } } } } })` 或 CSS 变量覆盖。

## 来源与致谢 Sources

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

---
Source: https://tokrepo.com/en/workflows/25e29ccf-35b8-11f1-9bc6-00163e2b0d79
Author: Script Depot