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

• Material Design 3 Applications in Vue 3: Enterprise business applications implementing Google Material Design.
• Complex Enterprise Data Tables: Server-side pagination, sorting, filtering, and row expansion with v-data-table-server.
• Administrative Portals & Dashboards: Pre-built form inputs, navigation drawers, app bars, and dialogs.
• Accessible Multi-Theme Applications: Switching seamlessly between light and dark themes with custom primary colors.

Quick Start

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-card class="pa-4" elevation="2">
          <v-card-title>Vuetify Card</v-card-title>
          <v-card-text
            >Ready-to-use Material Design components for Vue 3.</v-card-text
          >
          <v-btn color="primary" @click="showAlert">Action</v-btn>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
function showAlert() {
  alert("Vuetify action triggered");
}
</script>

Core Concepts

Theme Configuration & Component Blueprint Setup

Setting up Vuetify 3 with Material Design 3 tokens:

// plugins/vuetify.ts
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

export const vuetify = createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: "light",
    themes: {
      light: {
        colors: {
          primary: "#1867C0",
          secondary: "#5CBBF6",
          surface: "#FFFFFF",
        },
      },
      dark: {
        colors: {
          primary: "#2196F3",
          secondary: "#424242",
          surface: "#121212",
        },
      },
    },
  },
});

Server-Side Data Table with v-data-table-server

Displaying remote paginated data with sorting: