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

Для интеграции Vuetify в современный проект на JavaScript часто используют сборщик Vite благодаря его высокой скорости и простоте конфигурации. Ниже приведён пошаговый процесс настройки Vuetify с Vite, включая установку зависимостей, настройку плагинов и интеграцию стилей.

Создание проекта на Vite

  1. Создать новый проект через командную строку:
npm create vite@latest my-vuetify-app
  1. Выбрать Vue как фреймворк и TypeScript или JavaScript в зависимости от требований проекта.
  2. Перейти в директорию проекта:
cd my-vuetify-app
  1. Установить зависимости:
npm install

Установка Vuetify и сопутствующих библиотек

Для корректной работы Vuetify необходимы следующие пакеты:

npm install vuetify@latest sass sass-loader@latest
  • vuetify – основная библиотека компонентов.
  • sass и sass-loader – для работы с предопределёнными стилями Vuetify.

Если используется TypeScript, рекомендуется дополнительно установить типы:

npm install -D @types/node

Настройка Vite для Vuetify

Vuetify требует использования плагина vite-plugin-vuetify, который позволяет корректно импортировать компоненты и стили.

  1. Установить плагин:
npm install vite-plugin-vuetify
  1. В файле vite.config.js подключить плагин:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }),
  ],
})
  • Параметр autoImport: true позволяет автоматически импортировать все компоненты Vuetify, что облегчает разработку.

Настройка Vuetify в проекте

Создать файл src/plugins/vuetify.js для централизованной инициализации Vuetify:

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
})
  • vuetify/styles подключает базовые стили библиотеки.
  • components и directives регистрируют все компоненты и директивы.

В src/main.js подключить Vuetify к приложению 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 поддерживает светлые и тёмные темы, а также их кастомизацию:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

export default createVuetify({
  components,
  directives,
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme,
    },
  },
})
  • Цвета можно настраивать под любой дизайн.
  • Переключение между светлой и тёмной темой осуществляется через theme.global.name.

Импорт компонентов и использование SASS переменных

Vuetify использует систему SASS-переменных, что позволяет полностью кастомизировать внешний вид:

// src/styles/variables.scss
$material-light: (
  'primary': #1976D2,
  'secondary': #424242,
  'accent': #82B1FF,
);

Импорт переменных в проекте:

import 'vuetify/styles'
import './styles/variables.scss'

Это обеспечивает совместимость с системой тем Vuetify и позволяет менять цвета и отступы глобально.

Итоговая структура проекта после настройки

my-vuetify-app/
├─ src/
│  ├─ plugins/
│  │  └─ vuetify.js
│  ├─ styles/
│  │  └─ variables.scss
│  ├─ App.vue
│  └─ main.js
├─ vite.config.js
├─ package.json
└─ node_modules/
  • plugins/vuetify.js – инициализация Vuetify.
  • styles/variables.scss – глобальные переменные SASS для темизации.
  • vite.config.js – конфигурация Vite с подключением плагина Vuetify.

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

Запустить локальный сервер разработки:

npm run dev

В браузере по адресу http://localhost:5173 появится базовое Vue-приложение с подключённым Vuetify, готовое к использованию компонентов и кастомизации темы.

Vuetify через Vite обеспечивает лёгкую интеграцию, быструю сборку и гибкую настройку тем, что делает его оптимальным решением для современных Vue-проектов.

Оглавление