Глобальная конфигурация компонентов

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

Использование vuetify при инициализации

При создании экземпляра Vuetify в приложении можно задать глобальные настройки через объект components и defaults. Например:

import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import App from './App.vue';
import 'vuetify/styles';

const vuetify = createVuetify({
  defaults: {
    VBtn: {
      color: 'primary',
      rounded: 'lg',
      variant: 'contained',
    },
    VTextField: {
      density: 'comfortable',
      variant: 'outlined',
      clearable: true,
    },
  },
});

const app = createApp(App);
app.use(vuetify);
app.mount('#app');

Пояснения:

  • defaults — объект, в котором ключи соответствуют именам компонентов Vuetify (VBtn, VTextField и т.д.).
  • Значения — это параметры, которые будут применяться ко всем экземплярам компонента по умолчанию.
  • Локальные параметры, указанные непосредственно в компоненте, перезаписывают глобальные настройки.

Настройка темы по умолчанию

Vuetify позволяет глобально определять цвета, шрифты и другие атрибуты через объект theme. Пример глобальной конфигурации темы:

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

Особенности темы:

  • defaultTheme определяет текущую активную тему.
  • themes содержит перечень настроенных тем.
  • Цвета можно использовать как внутри компонентов (color="primary"), так и в стилях через CSS переменные.

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

Vuetify 3 поддерживает более тонкую настройку компонентов через объект global. Он позволяет задавать не только props, но и слоты, события и директивы:

const vuetify = createVuetify({
  defaults: {
    VBtn: {
      color: 'success',
      ripple: false,
    },
  },
  global: {
    VAppBar: {
      fixed: true,
      elevateOnScroll: true,
    },
  },
});
  • defaults применяется к свойствам компонента.
  • global может включать более комплексные настройки, включая обработку событий и модификацию слотов.

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

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

import { VTooltip } from 'vuetify/components';

const vuetify = createVuetify({
  components: {
    VTooltip,
  },
  defaults: {
    VTooltip: {
      openDelay: 300,
      closeDelay: 200,
    },
  },
});
  • Все тултипы в приложении будут открываться с задержкой 300 мс и закрываться через 200 мс.
  • Подобный подход снижает дублирование кода и гарантирует единообразное поведение UI.

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

Vuetify позволяет связывать глобальные настройки с адаптивными параметрами и темами:

const vuetify = createVuetify({
  defaults: {
    VCard: {
      elevation: 2,
      rounded: 'md',
      color: 'background',
    },
    VBtn: {
      size: 'large',
      variant: 'outlined',
    },
  },
  theme: {
    themes: {
      light: {
        colors: { background: '#FFFFFF' },
      },
      dark: {
        colors: { background: '#121212' },
      },
    },
  },
});
  • Компоненты автоматически адаптируют цвета к текущей теме.
  • Свойства size, rounded и variant позволяют создавать единый стиль интерфейса без дублирования кода.

Советы по использованию глобальных конфигураций

  1. Минимизировать локальные переопределения — глобальные настройки упрощают поддержку кода и обеспечивают консистентность.
  2. Использовать для базовых UI-элементов — кнопки, поля ввода, карточки, тултипы.
  3. Комбинировать с темами Vuetify — позволяет легко менять цветовую палитру всего приложения.
  4. Тестировать конфигурации на разных экранах — особенно важно для адаптивных компонентов, чтобы глобальные параметры не нарушали отображение на мобильных устройствах.

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

Оглавление