Scripts2026年4月11日·1 分钟阅读

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.

SC
Script Depot · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

npm create vuetify@latest
// 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");
<!-- 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>
介绍

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.

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Starship — Minimal Blazing-Fast Customizable Shell Prompt

Starship is a minimal, blazing-fast, and infinitely customizable prompt for any shell. Works with bash, zsh, fish, PowerShell, nushell, and more. Single TOML config file and Rust-powered speed with gorgeous defaults.

Script Depot

ripgrep (rg) — Recursively Search Directories with Regex

ripgrep recursively searches directories for a regex pattern while respecting your gitignore. Written in Rust, ripgrep is the fastest search tool on the market — used inside VS Code, GitHub, and many other dev tools.

Script Depot

Oh My Zsh — Delightful Framework for Managing Zsh Configuration

Oh My Zsh is a delightful, community-driven framework for managing your Zsh configuration. 300+ plugins (git, docker, node, python, homebrew), 140+ themes, and auto-update tooling. The de facto starting point for developer terminals.

Script Depot
◈首页🔍搜索👤我的