Настройка файла vuetify.js

Для начала работы с Vuetify в проекте на Vue.js необходимо создать отдельный файл конфигурации, чаще всего называемый vuetify.js. Этот файл служит точкой централизованного управления библиотекой компонентов, темами, стилями и глобальными настройками.

Импорт необходимых модулей

В стандартной конфигурации требуется импортировать createVuetify из vuetify и дополнительные компоненты или плагины, если используется Material Design Icons или другие иконки:

// src/plugins/vuetify.js
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

// Импорт компонентов и директив при необходимости
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
  • vuetify/styles подключает базовые стили библиотеки.
  • components и directives позволяют использовать все встроенные элементы без дополнительного импорта в каждом компоненте.
  • aliases и mdi настраивают иконки Material Design.

Создание экземпляра Vuetify

Экземпляр Vuetify создается с помощью функции createVuetify, в которую передаются конфигурационные объекты:

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107',
        },
      },
      dark: {
        colors: {
          primary: '#2196F3',
          secondary: '#FF5722',
          accent: '#FF4081',
          error: '#F44336',
          info: '#00BCD4',
          success: '#8BC34A',
          warning: '#FFC107',
        },
      },
    },
  },
})

Ключевые моменты:

  • components и directives — подключают все доступные элементы и директивы. Можно импортировать выборочно для уменьшения размера сборки.
  • icons — позволяет выбрать набор иконок по умолчанию (mdi, fa, material-icons) и настроить алиасы.
  • theme — задает глобальные цвета, темы и переключение между светлой и темной схемой.

Подключение Vuetify в основной файл приложения

После создания vuetify.js необходимо подключить его в main.js или main.ts проекта Vue:

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

const app = createApp(App)

app.use(vuetify)
app.mount('#app')

Это гарантирует, что Vuetify будет доступен во всех компонентах приложения.

Настройка тем

Vuetify предоставляет гибкую систему тем, позволяя задавать несколько тем и переключаться между ними динамически:

vuetify.theme.global.name.value = 'dark' // переключение на темную тему

Можно также настроить цвета отдельных компонентов через свойства v-bind или глобальные CSS-переменные.

Глобальные настройки компонентов

Файл vuetify.js позволяет установить глобальные параметры для всех компонентов:

const vuetify = createVuetify({
  defaults: {
    VBtn: {
      rounded: 'lg',
      elevation: 2,
      color: 'primary',
    },
    VTextField: {
      density: 'comfortable',
      variant: 'outlined',
    },
  },
})
  • defaults задает дефолтные значения для всех экземпляров указанного компонента.
  • Это упрощает поддержание единого стиля в приложении без повторного указания параметров.

Подключение локализации и плагинов

Vuetify поддерживает локализацию через createVuetify:

import { en, ru } from 'vuetify/locale'

const vuetify = createVuetify({
  locale: {
    locale: 'ru',
    messages: { en, ru },
  },
})
  • locale определяет язык интерфейса.
  • Можно подключать несколько языковых пакетов и переключать их динамически.

Оптимизация сборки

Для уменьшения размера итогового бандла рекомендуется подключать только нужные компоненты и директивы:

import { VApp, VBtn } from 'vuetify/components'
import { Ripple } from 'vuetify/directives'

const vuetify = createVuetify({
  components: { VApp, VBtn },
  directives: { Ripple },
})

Такой подход особенно важен для крупных проектов с большим количеством страниц и компонентов.

Структура файла vuetify.js

Идеальная структура файла должна быть логичной и разделенной по функциональным блокам:

  1. Импорт стилей и модулей
  2. Импорт компонентов и директив
  3. Настройка иконок
  4. Конфигурация темы
  5. Глобальные defaults компонентов
  6. Локализация и плагины
  7. Экспорт экземпляра Vuetify

Следование этой структуре обеспечивает удобное расширение и поддержку проекта в будущем.

Оглавление