Vuetify Configuration

Overview

Bimble Chat Vue uses Vuetify 3.9.2 as the primary UI framework, providing a comprehensive set of Material Design components. The configuration is centralized in src/plugins/vuetify.ts and integrates seamlessly with our custom theme system.

Key Features

Vuetify 3 with Vue 3 Composition API, Material Design Icons (MDI), custom theme integration, and component defaults for consistent styling.

Configuration File

The main Vuetify configuration is located at src/plugins/vuetify.ts:

import { createVuetify } from "vuetify";
import '@mdi/font/css/materialdesignicons.css';
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import { LIGHT_THEME } from "@/theme/LightTheme.ts";
import { DARK_THEME } from "@/theme/DarkTheme.ts";

export default createVuetify({
  directives,
  theme: {
    defaultTheme: "LIGHT_THEME",
    themes: {
      LIGHT_THEME,
      DARK_THEME,
    },
  },
  defaults: {
    VCard: {
      rounded: "md",
    },
    VTextField: {
      variant: "outlined",
      density: "comfortable",
      color: "primary",
    },
    VTextarea: {
      variant: "outlined",
      density: "comfortable",
      color: "primary",
    },
    VSelect: {
      variant: "outlined",
      density: "comfortable",
      color: "primary",
    },
    VListItem: {
      minHeight: "45px",
    },
    VTooltip: {
      location: "top",
    },
  },
});

Theme Integration

Vuetify integrates with our custom theme system, automatically switching between light and dark modes with dynamic color schemes.

Light Theme

Default light theme with custom color palette and Material Design principles

src/theme/LightTheme.ts

Dark Theme

Carefully crafted dark theme with optimized contrast and readability

src/theme/DarkTheme.ts

Dynamic Colors

5 color schemes that dynamically update primary and secondary colors

src/stores/colorSchemeStore.ts

Component Defaults

Global defaults are set for commonly used Vuetify components to ensure consistency across the application:

Form Components

VTextField: {
  variant: "outlined",
  density: "comfortable",
  color: "primary",
},
VTextarea: {
  variant: "outlined", 
  density: "comfortable",
  color: "primary",
},
VSelect: {
  variant: "outlined",
  density: "comfortable", 
  color: "primary",
}

Layout Components

VCard: {
  rounded: "md",
},
VListItem: {
  minHeight: "45px",
},
VTooltip: {
  location: "top",
}

Material Design Icons

Vuetify components use Material Design Icons (MDI) through the @mdi/font package for consistent iconography.

Installation

MDI icons are already included in the project dependencies:

"@mdi/font": "^7.4.47"

Import

Icons are imported in the Vuetify configuration:

import '@mdi/font/css/materialdesignicons.css';

Usage

Use MDI icons in Vuetify components with the mdi- prefix:

<v-btn icon="mdi-home"></v-btn>
<v-icon>mdi-chat</v-icon>
<v-list-item prepend-icon="mdi-settings"></v-list-item>

Theme Variables

Vuetify themes define color variables that are used throughout the application components:

colors: {
  primary: '#2687e5',         // Dynamic - changes with color scheme
  secondary: '#49BEFF',       // Dynamic - changes with color scheme
  info: '#539BFF',
  success: '#13DEB9',
  warning: '#FFAE1F',
  error: '#F44336',
  lightprimary: '#ECF2FF',    // Dynamic - light version of primary
  lightsecondary: '#E8F7FF',  // Dynamic - light version of secondary
  textPrimary: '#2A3547',
  textSecondary: '#2A3547',
  borderColor: '#e5eaef',
  background: '#ffffff',
  surface: '#fff',
  grey100: '#F2F6FA',
  softBg: '#F8FAFC'
}

colors: {
  primary: '#2687e5',         // Dynamic - changes with color scheme  
  secondary: '#49BEFF',       // Dynamic - changes with color scheme
  info: '#539BFF',
  success: '#13DEB9',
  warning: '#FFAE1F', 
  error: '#FA896B',
  lightprimary: '#253662',    // Dynamic - dark version of primary
  lightsecondary: '#1C455D',  // Dynamic - dark version of secondary
  textPrimary: '#EAEFF4',
  textSecondary: '#7C8FAC',
  borderColor: '#333F55',
  background: '#2a3447',
  surface: '#2a3447',
  grey100: '#333F55',
  softBg: '#13171e'
}

Customization

You can customize Vuetify configuration to match your design requirements:

Adding Components

Add new component defaults to maintain consistency:

defaults: {
  // Existing defaults...
  VChip: {
    size: "small",
    variant: "tonal",
  },
  VAvatar: {
    size: "40",
  },
}

Modifying Defaults

Update existing component defaults as needed:

VTextField: {
  variant: "filled",        // Change from outlined
  density: "compact",       // Change from comfortable
  color: "secondary",       // Change from primary
}

Best Practices

Do

Use theme variables in custom SCSS
Set global component defaults for consistency
Import only needed Vuetify components for smaller bundle
Use MDI icons with Vuetify components

Avoid

Hardcoding colors instead of using theme variables
Importing entire Vuetify library unnecessarily
Mixing different icon libraries with MDI
Overriding component styles without using defaults

What's Next?

Now that you understand Vuetify configuration, here are some recommended next steps: