Vuetify 4

Vuetify 4 Agent Skill

Vuetify is a Material Design component library based on Vue 3, providing rich pre-built components and utility classes.

Basic Concepts

Application Structure

Basic structure of a Vuetify application:

<template>
  <v-app>
    <v-app-bar title="My App"></v-app-bar>
    <v-navigation-drawer></v-navigation-drawer>
    <v-main>
      <v-container>
        <!-- Page content -->
      </v-container>
    </v-main>
  </v-app>
</template>

Core Layout Components

See references/layout.md for detailed usage.

Utility Classes Quick Reference

Vuetify provides rich utility classes:

Spacing (ma-, pa-, mx-, my-)

<div class="ma-4 pa-2 mx-auto my-4">Spacing</div>

Alignment (justify-, align-)

<v-row justify="center" align="center">
  <v-col>Centered Content</v-col>
</v-row>

Display Control (d-*)

<div class="d-none d-md-flex">Desktop Display</div>

See references/utilities.md for detailed utility classes.

Component Quick Reference

Buttons & Cards

• v-btn - Button component
• v-card - Card component

Dialogs & Notifications

• v-dialog - Modal dialog
• v-snackbar - Toast notification
• v-alert - Alert banner

Lists

• v-list - List component

Tabs & Chips

• v-tabs / v-tab - Tab navigation
• v-chip - Chip/tag component
• v-chip-group - Chip group

Form Components

• v-text-field - Text input
• v-select - Dropdown select
• v-switch / v-checkbox - Switch/Checkbox
• v-form - Form validation

Navigation Components

• v-app-bar - Top navigation bar
• v-navigation-drawer - Side navigation
• v-bottom-navigation - Bottom navigation

Data Display

• v-data-table - Data table

See references/components/ for detailed usage.

Theming & Colors

Color Classes

<!-- Background -->
<div class="bg-primary">Primary Background</div>
<div class="bg-error">Error Background</div>

<!-- Text color -->
<span class="text-secondary">Secondary Text</span>
<span class="text-success">Success Text</span>

Dark Mode

<!-- Component level dark mode -->
<v-btn dark>Dark Button</v-btn>

<!-- Global dark mode class -->
<v-app class="dark">

See references/theming.md for detailed theming usage.

CSS Layers Architecture

Vuetify 4 uses CSS Layers for style organization, enabling better compatibility with third-party CSS like TailwindCSS.

See references/css-layers.md for detailed usage.

Quick Examples

Minimum Runnable Example

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-card title="Welcome" subtitle="Vuetify 4">
          <v-card-text>
            This is a simple card component
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary">Confirm</v-btn>
            <v-btn variant="text">Cancel</v-btn>
          </v-card-actions>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
</script>

Login Page Example

<template>
  <v-app>
    <v-main>
      <v-container class="fill-height" fluid>
        <v-row justify="center" align="center">
          <v-col cols="12" sm="8" md="4">
            <v-card>
              <v-card-title class="text-center">Login</v-card-title>
              <v-card-text>
                <v-text-field label="Username" variant="outlined"></v-text-field>
                <v-text-field label="Password" type="password" variant="outlined"></v-text-field>
              </v-card-text>
              <v-card-actions>
                <v-btn block color="primary">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

See more patterns in references/patterns/

Common Tasks Quick Reference