vuetify-overview - SKILL.md Agent Skill

name: vuetify-overview description: "Vuetify 4 (Material Design 3) entry point and global configuration for the Vue SSR Starter Kit: component selection decision tree (which v-component for which UI need), project-wide defaults in src/plugins/vuetify.js (rounded, variants, density per component), the semantic color palette (primary/secondary/accent/success/warning/error), SSR-safe instantiation (createApplicationVuetify(ssr) flag), and responsive breakpoints via the useDisplay composable. Trigger on: choosing which Vuetify component to use, project default props, color tokens by name, SSR Vuetify setup, useDisplay/breakpoint behavior, or a general 'which Vuetify component' question. Don't use for: specific component APIs — forms (→ vuetify-forms), data tables (→ vuetify-data), cards/dialogs/alerts (→ vuetify-components), app-bar/drawer/tabs (→ vuetify-layout), theming/dark mode (→ vuetify-theming), icons (→ vuetify-icons), SCSS tokens (→ design-scss)."

Vuetify Overview

Entry point for all Vuetify 4 usage in the Vue SSR Starter Kit: component selection, project defaults, color tokens, SSR setup, and responsive breakpoints.

Vuetify skill family

This skill is the entry point. Specific component APIs and patterns live in sibling skills:

vuetify-theming — theme config, dark mode, defaults object, Vuetify CSS utility classes
vuetify-layout — app shell, grid, app bar, navigation drawer, menus, tabs, breadcrumbs
vuetify-forms — inputs, validation rules, v-form wrapper, form submission
vuetify-data — data tables (server-side pagination), v-pagination
vuetify-components — cards, lists, chips, avatars, dialogs, snackbars, alerts, tooltips, progress, skeletons
vuetify-icons — @mdi/js tree-shakeable SVG icons

Component selection decision tree

UI need	Component	Notes
Text input	`v-text-field`	outlined, comfortable density, rounded lg
Dropdown	`v-select`	same defaults as text-field
Toggle	`v-switch`	primary color, inset
Action button	`v-btn`	flat variant, rounded lg
Card container	`v-card`	rounded xl, no elevation, border
Data grid	`v-data-table`	server-side pagination preferred
Navigation list	`v-list` + `v-list-item`	with prepend icons
Tag/badge	`v-chip`	rounded lg
Modal	`v-dialog`	max-width, persistent for forms
Toast notification	`v-snackbar`	location bottom, timeout 4000
Inline message	`v-alert`	tonal variant, rounded lg
Hover info	`v-tooltip`	location bottom
Top bar	`v-app-bar`	flat, density comfortable
Side menu	`v-navigation-drawer`	temporary on mobile, rail on desktop
Context menu	`v-menu`	activator slot pattern
Tab navigation	`v-tabs` + `v-tabs-window`	with v-tab items
Loading state	`v-progress-linear` / `v-progress-circular`	indeterminate
Skeleton	`v-skeleton-loader`	type: card, list-item, article
Grid layout	`v-container` + `v-row` + `v-col`	12-column grid

Project defaults

The project configures global defaults in src/plugins/vuetify.js:

defaults: {
  VBtn: { variant: 'flat', rounded: 'lg' },
  VCard: { rounded: 'xl', elevation: 0, border: true },
  VTextField: { variant: 'outlined', density: 'comfortable', rounded: 'lg' },
  VSelect: { variant: 'outlined', density: 'comfortable', rounded: 'lg' },
  VSwitch: { color: 'primary', inset: true },
  VChip: { rounded: 'lg' },
  VAlert: { rounded: 'lg', variant: 'tonal' },
  VTooltip: { location: 'bottom' }
}

These apply globally. Override per-instance when needed (e.g. <v-btn variant="outlined">).

Color system

Token	Value	Use
`primary`	#2563eb	Main actions, links, active states
`primary-darken-1`	#1e40af	Hover states
`primary-darken-2`	#1e3a8a	Active/pressed states
`primary-lighten-1`	#60a5fa	Subtle backgrounds
`primary-lighten-2`	#93c5fd	Very subtle backgrounds
`secondary`	#7c3aed	Secondary actions
`accent`	#06b6d4	Highlights, accents
`success`	#00c853	Success states
`warning`	#ff9800	Warning states
`error`	#f44336	Error states, destructive
`info`	#2196f3	Informational
`surface`	#ffffff	Card/sheet backgrounds
`background`	#f8fafc	Page background

Use semantic color names in components: color="primary", color="error", etc. Never hardcode hex values.

SSR integration

Vuetify must be instantiated with the ssr flag on the server:

import { createApplicationVuetify } from '@/plugins/vuetify';

const vuetify = createApplicationVuetify(true);
app.use(vuetify);

On the client, pass false (or omit):

const vuetify = createApplicationVuetify(false);

This ensures hydration works correctly. The SSR flag disables client-only features during server rendering.

Responsive patterns

Use Vuetify's display composable for breakpoint-aware behavior:

<script setup>
import { useDisplay } from 'vuetify';

const { mobile, mdAndUp } = useDisplay();
</script>
<template>
  <v-navigation-drawer :temporary="mobile" :rail="mdAndUp" />
</template>

Breakpoints: xs (<600), sm (600-959), md (960-1279), lg (1280-1919), xl (1920+).