# Vuetify

> Vuetify Material Design component framework for Vue. Use for Vue UI.

- Skill: `g1joshi/vuetify` (Agent Skill)
- Install (CLI): `npx skillmds@latest add g1joshi/vuetify`
- Raw SKILL.md: https://api.skillmd.com/api/skills/g1joshi/vuetify/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: G1Joshi (https://skillmd.com/u/g1joshi)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/g1joshi/vuetify

---


# Vuetify

Vuetify is the comprehensive UI toolkit for Vue. v3 (Titan) is built for **Vue 3** and Vite, offering massive performance improvements over v2.

## When to Use

- **Enterprise Dashboards**: The `VDataTable` is feature-rich.
- **Material Design**: Strict adherence to MD3 (Material Design 3).
- **Speed**: Rapid prototyping with pre-built components.

## Core Concepts

### Layout System

`v-app`, `v-main`, `v-container`. Essential for structure.

### Slots

Extensive use of slots for customization (`<template v-slot:append>`).

### Defaults

Global configuration of component default props.

## Best Practices (2025)

**Do**:

- **Use `Vite`**: Webpack is legacy.
- **Use Tree-shaking**: Import only what you use (automatic in v3).
- **Use SASS/SCSS Variables**: For theming.

**Don't**:

- **Don't mix with other UI libs**: Vuetify is invasive (global styles).

## References

- [Vuetify Documentation](https://vuetifyjs.com/)