useQuasar композабл

useQuasar — это ключевой композабл в Quasar Framework для работы с глобальными возможностями фреймворка внутри компонентов Vue 3. Он позволяет получить доступ к объекту $q, который содержит набор утилит и API для работы с интерфейсом, темами, уведомлениями, диалогами, анимациями и другими функциональными возможностями Quasar.

import { useQuasar } from 'quasar';
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const $q = useQuasar();
    return { $q };
  }
});

После вызова useQuasar объект $q становится доступным для вызова различных методов и свойств. Важно понимать, что $q не создаёт новый экземпляр Quasar, а предоставляет доступ к глобальному объекту фреймворка.

Работа с темами и цветами

Quasar предоставляет гибкий механизм управления темами и цветовыми схемами через $q:

  • Динамическое переключение темы (светлая/тёмная):
$q.dark.set(true);   // Включить тёмную тему
$q.dark.toggle();    // Переключить тему
  • Получение состояния текущей темы:
const isDark = $q.dark.isActive;
  • Доступ к цветам из палитры Quasar:
const primaryColor = $q.colors.getBrand('primary');

Цвета можно использовать для динамического изменения стилей компонентов и создания адаптивного дизайна.

Уведомления и диалоги

useQuasar предоставляет удобный доступ к API для уведомлений и модальных окон:

  • Создание уведомления (Notify):
$q.notify({
  message: 'Операция успешно выполнена',
  color: 'green',
  icon: 'check',
  position: 'top-right',
  timeout: 3000
});
  • Использование диалогов (Dialog):
$q.dialog({
  title: 'Подтверждение',
  message: 'Вы действительно хотите удалить элемент?',
  cancel: true,
  persistent: true
}).onOk(() => {
  console.log('Элемент удалён');
}).onCancel(() => {
  console.log('Операция отменена');
});
  • Асинхронное использование диалогов:
async function confirmDelete() {
  try {
    await $q.dialog({
      title: 'Подтверждение',
      message: 'Удалить запись?',
      cancel: true
    });
    console.log('Подтверждено');
  } catch {
    console.log('Отмена');
  }
}

Работа с размером экрана и адаптивностью

Quasar позволяет отслеживать размеры и ориентацию экрана через $q.screen:

  • Доступ к свойствам экрана:
const screenWidth = $q.screen.width;
const screenHeight = $q.screen.height;
const isMobile = $q.screen.lt.md; // true, если экран меньше чем medium
  • Реактивное наблюдение за изменением размера:
import { watch } from 'vue';

watch(() => $q.screen.width, (newWidth) => {
  console.log('Ширина экрана изменилась:', newWidth);
});
  • Состояния breakpoint и ориентации:
if ($q.screen.gt.sm) {
  console.log('Экран больше small');
}
if ($q.screen.landscape) {
  console.log('Горизонтальная ориентация');
}

Эти возможности позволяют строить полностью адаптивные интерфейсы без необходимости использовать сторонние библиотеки для работы с медиазапросами.

Работа с локализацией и языковыми пакетами

Через $q.lang доступен механизм локализации:

import { useQuasar } from 'quasar';
import langRu from 'quasar/lang/ru.js';

const $q = useQuasar();
$q.lang.set(langRu);  // Установить русский язык
const currentLocale = $q.lang.getLocale(); // Получить текущую локаль

Это полезно для динамического переключения языков без перезагрузки страницы и для интеграции с компонентами Quasar, которые поддерживают локализацию.

Доступ к конфигурации приложения

Объект $q содержит информацию о конфигурации, заданной при инициализации Quasar, включая платформу, версии и настройки фреймворка:

console.log($q.platform.is.desktop); // Проверка, запущено ли приложение на десктопе
console.log($q.version);             // Версия Quasar
  • Проверка платформы: $q.platform позволяет различать web, мобильные приложения на Cordova, Capacitor и Electron.
  • Реактивная адаптация интерфейса становится простой благодаря информации о платформе и размере экрана.

Стилизация и анимации

Через $q можно управлять глобальными стилями и анимациями:

  • Анимации через Quasar Transitions:
$q.transitions.slideUp;   // Доступ к предопределённой анимации
$q.transitions.slideDown;
  • Применение динамических стилей:
const style = {
  backgroundColor: $q.colors.getBrand('secondary')
};

Это позволяет создавать единообразный интерфейс с плавными анимациями и согласованной цветовой палитрой.

Интеграция с Vue Composition API

useQuasar идеально сочетается с Composition API:

import { ref } from 'vue';
import { useQuasar } from 'quasar';

export default {
  setup() {
    const $q = useQuasar();
    const counter = ref(0);

    function increment() {
      counter.value++;
      $q.notify({
        message: `Счётчик: ${counter.value}`,
        color: 'blue'
      });
    }

    return { counter, increment };
  }
};

Такой подход позволяет строить реактивные, динамичные интерфейсы с минимальной связностью и высокой гибкостью.

Оглавление