Установка через Vue CLI

Для интеграции Vuetify в проект на Vue.js рекомендуется использовать Vue CLI, так как этот инструмент обеспечивает автоматическую настройку зависимостей, конфигурации Webpack и интеграцию с компонентами Vuetify. Ниже рассматривается пошаговый процесс установки и первоначальной настройки.

1. Создание нового проекта Vue

Для начала необходимо создать новый проект с помощью Vue CLI. Используется команда:

vue create my-vuetify-app

При запуске команды появляется интерактивное меню, где выбираются параметры проекта:

  • Выбор версии Vue (рекомендуется Vue 3 для новых проектов)
  • Выбор конфигурации (ручная или преднастроенная)
  • Подключение дополнительных инструментов (например, Vue Router, Vuex, ESLint)

После завершения генерации проекта переходим в директорию проекта:

cd my-vuetify-app

2. Добавление Vuetify в проект

Vuetify можно добавить через встроенный плагин Vue CLI. Используется команда:

vue add vuetify

После её запуска появится меню конфигурации, где можно выбрать один из двух вариантов:

  • Default (recommended) — стандартная преднастройка Vuetify с базовой темой и компонентами.
  • Configure (advanced) — ручная настройка, где можно выбрать тип темы (light/dark), шрифты и дополнительные опции.

Пример выбора стандартной конфигурации обеспечивает минимальные усилия для начала работы с библиотекой и сразу подключает основные стили и шрифты.

3. Структура подключенного Vuetify

После добавления плагина проект приобретает следующие ключевые изменения:

  1. В main.js или main.ts подключается Vuetify:
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify' // подключение Vuetify
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')
  1. Создается файл конфигурации плагина plugins/vuetify.js:
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
  theme: {
    defaultTheme: 'light',
  },
})

В этом файле задаются:

  • Иконки (Material Design Icons по умолчанию)
  • Тема приложения (светлая или тёмная)
  • Возможность подключения дополнительных плагинов Vuetify (например, VDatePicker, VDialog и другие).

4. Проверка установки

После завершения установки можно запустить проект командой:

npm run serve

Или с использованием Yarn:

yarn serve

При успешной интеграции открывшийся локальный сервер будет отображать стандартную страницу Vuetify с приветственным компонентом v-app, кнопками и базовой сеткой.

5. Настройка темы и глобальных стилей

Vuetify позволяет гибко настраивать темы через объект theme в createVuetify. Пример кастомной темы:

const myCustomTheme = {
  dark: false,
  colors: {
    primary: '#1976D2',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme,
    },
  },
})

Эта конфигурация задаёт пользовательскую палитру цветов, которая применяется ко всем компонентам Vuetify.

6. Подключение шрифтов и иконок

Vuetify использует Material Design Icons (MDI) и шрифты Google по умолчанию. Для глобального подключения используется функция loadFonts в plugins/webfontloader.js:

import WebFont from 'webfontloader'

export function loadFonts () {
  WebFont.load({
    google: {
      families: ['Roboto:100,300,400,500,700,900&display=swap'],
    },
  })
}

Эта настройка обеспечивает корректное отображение текстов и иконок по всему приложению.

7. Особенности для Vue 3

Vuetify 3 полностью совместим с Vue 3 и использует Composition API. Ключевые моменты:

  • v-app должен оборачивать все компоненты, чтобы тема и стили применялись корректно.
  • Подключение Vuetify через createVuetify и app.use(vuetify) обязательно в main.js.
  • Все компоненты импортируются автоматически при использовании стандартного плагина Vue CLI, что облегчает работу с Tree Shaking и уменьшает размер сборки.

8. Рекомендации по дальнейшей настройке

  • Для крупных проектов рекомендуется создавать отдельные модули тем и иконок, чтобы централизованно управлять стилями.
  • Настройка dark/light темы через v-theme-provider позволяет динамически переключать интерфейс.
  • Использование Vue CLI плагина упрощает интеграцию Vuetify с Vue Router и Vuex.

Vuetify через Vue CLI обеспечивает быстрый старт, автоматическое подключение стилей, шрифтов и иконок, а также готовую структуру для масштабируемых приложений на Vue.js.

Оглавление