ScriptsApr 11, 2026·1 min read

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
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

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

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

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

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
◈Home🔍Search👤Me