Vuetify Patterns

Quick Guide: Vuetify provides 80+ pre-styled Vue 3 components implementing Material Design. Configure with createVuetify() -- set theme for colors, defaults for global component props, and blueprint: md3 for MD3 compliance. Use v-defaults-provider for scoped prop overrides. Customize at the SASS level with @use 'vuetify/settings' for compile-time changes. Current: v3.8.x -- useRules composable for form validation, date picker improvements, performance optimizations. Vuetify is template-driven -- prefer declarative props/slots over imperative JS.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST install and register Vuetify as a Vue plugin via app.use(vuetify) -- components will not render without the plugin)

(You MUST use the defaults system in createVuetify() or v-defaults-provider for consistent component props -- never repeat the same prop on every instance)

(You MUST use named slots (v-slot:item.<key>, v-slot:prepend) for component customization -- not wrapper divs with manual styling)

(You MUST define v-data-table headers and column arrays outside the component -- inline arrays cause re-renders on every parent update)