Nuxt.js

Vuetify — это библиотека компонентов для Vue.js, предоставляющая богатый набор готовых элементов интерфейса, которые соответствуют принципам Material Design. Использование Vuetify вместе с Nuxt.js обеспечивает быстрый старт при разработке универсальных (SSR) приложений с современным визуальным оформлением и адаптивной версткой.

Установка Vuetify в Nuxt.js

Для добавления Vuetify в проект на Nuxt.js используется официальный модуль @nuxtjs/vuetify. Установка выполняется через npm или yarn:

npm install @nuxtjs/vuetify
# или
yarn add @nuxtjs/vuetify

После установки необходимо зарегистрировать модуль в конфигурации nuxt.config.js:

export default {
  buildModules: [
    '@nuxtjs/vuetify',
  ],
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        light: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
          info: '#2196F3',
          success: '#4CAF50',
          warning: '#FFC107'
        },
      },
    },
  }
}

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

  • customVariables позволяет подключать SCSS-переменные для кастомизации стилей.
  • Объект theme настраивает цветовую схему приложения, поддерживая светлую и тёмную темы.

Использование компонентов Vuetify в Nuxt.js

После подключения модуля все компоненты Vuetify становятся глобально доступными в проекте Nuxt.js. Основная структура компонента выглядит стандартно для Vue:

<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>Пример карточки</v-card-title>
          <v-card-text>
            Это текст внутри карточки Vuetify.
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary">Действие</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'ExampleCard'
}
</script>

Особенности работы с Vuetify в Nuxt.js:

  • Компоненты v-container, v-row, v-col обеспечивают адаптивную сетку, совместимую с Grid System.
  • Все элементы автоматически используют глобальные темы, заданные в конфигурации.

Настройка тем и кастомизация

Vuetify предоставляет расширенные возможности по кастомизации:

  1. SCSS переменные Создаётся файл ~/assets/variables.scss, в котором можно переопределять стандартные цвета, шрифты и размеры компонентов:

    $btn-border-radius: 12px;
$font-size-root: 16px;
$material-light: (
  primary: #1E88E5,
  secondary: #FFC107,
  accent: #82B1FF
);

  2. Темизация через nuxt.config.js В разделе vuetify.theme можно динамически включать светлую или тёмную тему, а также задавать пользовательские цвета для компонентов.

  3. Динамическая смена темы Внутри компонентов можно переключать темы через объект this.$vuetify.theme.dark = true/false.

Работа с иконками

Vuetify интегрируется с различными библиотеками иконок, включая Material Icons и FontAwesome. Настройка выполняется в nuxt.config.js:

vuetify: {
  icons: {
    iconfont: 'mdi', // 'mdi', 'fa', 'fa4', 'md'
  },
}

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

<v-btn icon>
  <v-icon>mdi-heart</v-icon>
</v-btn>

SSR и производительность

При использовании Nuxt.js с SSR важно учитывать:

  • Сборка стилей: все SCSS и темы должны быть предварительно скомпилированы на сервере.
  • Lazy-loading компонентов: для ускорения загрузки страниц можно использовать динамическое подключение компонентов Vuetify через nuxt.config.js:
vuetify: {
  treeShake: true
}

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

Интеграция с Vuex

Vuetify отлично работает с Vuex для управления состоянием. Пример: переключение тёмной темы через store.

// store/theme.js
export const state = () => ({
  dark: false
})

export const mutations = {
  toggleTheme(state) {
    state.dark = !state.dark
  }
}
<v-switch
  v-model="$store.state.theme.dark"
  @change="$vuetify.theme.dark = $store.state.theme.dark"
  label="Тёмная тема"
/>

Продвинутые компоненты

Vuetify содержит множество продвинутых компонентов:

  • v-data-table — таблицы с сортировкой, пагинацией и фильтрацией.
  • v-dialog — модальные окна с поддержкой динамического контента.
  • v-carousel — карусели с анимацией и адаптивностью.
  • v-form — формы с валидацией и интеграцией с Vuex.

Пример использования v-data-table:

<v-data-table
  :headers="headers"
  :items="items"
  item-key="id"
  class="elevation-1"
>
</v-data-table>
export default {
  data() {
    return {
      headers: [
        { text: 'Имя', value: 'name' },
        { text: 'Возраст', value: 'age' },
        { text: 'Город', value: 'city' }
      ],
      items: [
        { id: 1, name: 'Алексей', age: 28, city: 'Москва' },
        { id: 2, name: 'Мария', age: 32, city: 'Санкт-Петербург' }
      ]
    }
  }
}

Итоговые рекомендации по архитектуре

  • Разделение компонентов: использовать отдельные файлы для сложных карточек, таблиц и форм.
  • Глобальные темы и SCSS переменные: централизованная кастомизация упрощает поддержку дизайна.
  • Lazy-loading и tree-shaking: снижает вес бандла и повышает производительность.
  • Интеграция с Vuex: для управления состоянием компонентов, включая переключение тем, фильтры таблиц и модальные окна.

Vuetify в связке с Nuxt.js позволяет строить масштабируемые, адаптивные и визуально цельные приложения, соблюдая лучшие практики Material Design и оптимизируя серверную и клиентскую часть одновременно.

Оглавление