Vuetify Skilld

This covers Vuetify 4.0.1, the Vue Material Design component framework. The big news here is the v4 overhaul: grids now use CSS gap instead of negative margins, typography variants got renamed for Material Design 3, and elevation levels dropped from 25 to 6. You'll want this when working with any Vuetify imports, especially if you're migrating from v3 and need to understand breaking changes like VBtn no longer uppercasing text by default or VForm slots now being unwrapped values. It includes best practices like using the cmd modifier for cross-platform hotkeys and handling TailwindCSS conflicts through CSS layers. Good reference material for the grid system changes alone.

skills.sh installs: 155
GitHub stars: 165
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add harlan-zw/vue-ecosystem-skills --skill vuetify-skilld --agent claude-code

Installs into .claude/skills of the current project.

Files

vuetify@4.0.1

Material Design component framework for Vue 3. Source citations like lib/framework.js:15 refer to the prepared vuetify@4.0.1 package (package.json:4).

Environment limits

Vue ^3.5.0 peer dependency (package.json:208). No Vue 2 support; Vuetify 2 is EOL (README.md:274).
ESM only: "type": "module" (package.json:32).
Optional peers: vite-plugin-vuetify >=2.1.0, webpack-plugin-vuetify >=3.1.0, typescript >=4.7 (package.json:205).
Modern browsers, Safari 13+ with polyfills, minimum design width 320px (README.md:159).
Default font is Roboto; you must add it yourself, e.g. @fontsource/roboto (https://vuetifyjs.com/getting-started/installation/).

Setup

Vite with automatic treeshaking (preferred). The vuetify plugin must come after the vue plugin:

// vite.config.js
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'
export default defineConfig({ plugins: [vue(), vuetify()] })

// src/plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
export default createVuetify({
  // components, directives not needed with the loader plugin
})

SKILL.md on GitHub