Appearance

Vuetify Plugin ​

File Information ​

  • Path: app/plugins/vuetify.ts
  • Purpose: Configure Vuetify UI component library
  • Type: Universal (runs on both server and client)
  • Load Order: 4

Overview ​

The Vuetify plugin configures Vuetify 3, a Material Design component library for Vue.js. It sets up components, directives, icons, themes, and SSR configuration for consistent UI across the application.

Key Features ​

  1. Component Library

    • All Vuetify components available
    • Material Design components
    • Consistent styling

  2. Icon System

    • Material Design Icons (MDI)
    • Icon aliases
    • Custom icon support

  3. SSR Configuration

    • Server-side rendering support
    • Hydration-safe configuration
    • Desktop width during SSR

  4. Theme Configuration

    • Light theme (default)
    • Customizable colors
    • Theme switching support

Code Structure ​

typescript
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    components,
    directives,
    defaults: {
      global: {
        ripple: false,
      },
    },
    ssr: {
      clientWidth: 1920,
      clientHeight: 1080,
    },
    theme: {
      defaultTheme: 'light',
    },
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: { mdi },
    },
  })

  nuxtApp.vueApp.use(vuetify)
})

Configuration ​

Components ​

All Vuetify components are registered:

  • Buttons, Cards, Dialogs
  • Forms, Inputs, Selects
  • Lists, Menus, Navigation
  • And many more...

Directives ​

All Vuetify directives are registered:

  • v-ripple - Ripple effect (disabled globally)
  • v-tooltip - Tooltip directive
  • And more...

Defaults ​

  • Ripple: Disabled globally
  • Prevents unwanted ripple effects

SSR Configuration ​

  • Client Width: 1920px (desktop)
  • Client Height: 1080px
  • Purpose: Prevents hydration mismatches by always rendering as desktop during SSR

Theme ​

  • Default Theme: light
  • Custom themes can be added
  • Theme switching supported

Icons ​

  • Default Set: mdi (Material Design Icons)
  • Aliases: Predefined icon aliases
  • Sets: MDI icon set

Usage Examples ​

Using Vuetify Components ​

vue
<template>
  <v-btn color="primary">Click Me</v-btn>
  <v-card>
    <v-card-title>Title</v-card-title>
    <v-card-text>Content</v-card-text>
  </v-card>
</template>

Using Icons ​

vue
<template>
  <v-icon>mdi-home</v-icon>
  <v-icon icon="mdi-account" />
</template>

Using Directives ​

vue
<template>
  <v-btn v-ripple>Button</v-btn>
  <v-tooltip text="Tooltip text">
    <template #activator="{ props }">
      <v-btn v-bind="props">Hover me</v-btn>
    </template>
  </v-tooltip>
</template>

Available Components ​

Form Components ​

  • v-text-field - Text input
  • v-textarea - Textarea
  • v-select - Select dropdown
  • v-checkbox - Checkbox
  • v-radio - Radio button
  • v-switch - Switch toggle

Layout Components ​

  • v-container - Container
  • v-row - Row
  • v-col - Column
  • v-spacer - Spacer
  • v-app-bar - App bar
  • v-navigation-drawer - Navigation drawer
  • v-breadcrumbs - Breadcrumbs
  • v-tabs - Tabs

Data Display ​

  • v-card - Card
  • v-list - List
  • v-table - Table
  • v-chip - Chip

Feedback ​

  • v-dialog - Dialog
  • v-snackbar - Snackbar (custom plugin used instead)
  • v-progress-circular - Circular progress
  • v-progress-linear - Linear progress

Dependencies ​

  • vuetify - UI component library
  • @mdi/font - Material Design Icons font

SSR Considerations ​

Desktop Width During SSR ​

  • Always renders as desktop (1920px width)
  • Prevents mobile/desktop hydration mismatches
  • Client-side detects actual screen size

Hydration Safety ​

  • Components are SSR-safe
  • State properly hydrated
  • No layout shifts

Notes for Development ​

  • Universal plugin (runs on server and client)
  • Ripple effect disabled globally
  • SSR configured for desktop width
  • MDI icons available throughout app
  • All Vuetify components available
  • Custom theme can be added