Quasar Vue: що це таке і як ним користуватись?

Що таке Quasar Framework?

Quasar — це фреймворк для Vue.js, який дозволяє створювати високопродуктивні кросплатформенні застосунки. Він дає можливість писати код один раз, а потім розгортати його на різних платформах:

Web (SPA, SSR, PWA)
Мобільні додатки (iOS, Android через Cordova/Capacitor)
Робочі столи (Windows, macOS, Linux через Electron)

Quasar побудований на Vue 3 і надає велику бібліотеку готових UI-компонентів, а також потужну систему зборки та оптимізації.

Основні переваги Quasar

✅ Один код — багато платформ
✅ Готові UI-компоненти (кнопки, таблиці, діалоги, форми тощо)
✅ Оптимізований під продуктивність (мінімізація бандлів, lazy-loading, tree-shaking)
✅ Глибока інтеграція з Vue 3 та Composition API
✅ Легка адаптація для мобільних і десктопних додатків
✅ Вбудована підтримка TypeScript
✅ Гнучка система темізації та стилів

Як встановити Quasar?

Перед початком потрібно встановити Node.js (LTS версію) та менеджер пакетів npm або yarn.

1. Встановлення Quasar CLI

npm install -g @quasar/cli

Перевірити, чи встановлено Quasar CLI:

quasar -v

2. Створення нового проєкту

quasar create my-quasar-app

Quasar запропонує налаштування проєкту (TypeScript, ESLint, Prettier тощо) — виберіть те, що потрібно.

3. Запуск локального сервера

cd my-quasar-app
quasar dev

Проєкт відкриється за адресою: http://localhost:9000

Структура проєкту Quasar

my-quasar-app
│── src/              # Основний код застосунку
│   ├── components/   # Компоненти Vue
│   ├── layouts/      # Макети сторінок
│   ├── pages/        # Сторінки (роутинг)
│   ├── boot/         # Глобальні ініціалізації
│   ├── css/          # Стилі
│   ├── store/        # Pinia / Vuex (стан)
│   └── App.vue       # Головний компонент
│── public/           # Статичні файли
│── quasar.config.js  # Налаштування Quasar
│── package.json      # Залежності
│── babel.config.js   # Babel-конфігурація
└── tsconfig.json     # TypeScript-конфігурація (якщо використовується)

Основи роботи з Quasar

1. Використання UI-компонентів

Quasar має готову бібліотеку компонентів, які легко додавати до Vue-застосунку.

Наприклад, додамо кнопку:

<template>
  <q-btn color="primary" label="Натисни мене" @click="sayHello" />
</template>

<script setup>
const sayHello = () => {
  alert("Привіт із Quasar!");
};
</script>

2. Глобальне підключення компонентів

Усі Quasar-компоненти автоматично доступні у проєкті, тому не потрібно їх імпортувати.

Приклад використання теми:

<q-toolbar class="bg-primary text-white">
  <q-btn flat round icon="menu" />
  <q-toolbar-title>Мій застосунок</q-toolbar-title>
</q-toolbar>

3. Використання іконок

Quasar підтримує Material Icons, FontAwesome, Ionicons тощо.

<q-icon name="star" color="yellow" size="24px" />

4. Форми і введення даних

<q-input v-model="name" label="Введіть ім’я" filled />
<q-btn color="secondary" @click="submit">Надіслати</q-btn>

<script setup>
import { ref } from 'vue';
const name = ref('');
const submit = () => {
  alert(`Привіт, ${name.value}!`);
};
</script>

Навігація (Vue Router)

Quasar використовує Vue Router для керування сторінками.

Додати нову сторінку

Створимо src/pages/About.vue:

<template>
  <q-page>
    <h1>Про нас</h1>
  </q-page>
</template>

Додамо маршрут у src/router/routes.js:

import { RouteRecordRaw } from 'vue-router';
import About from 'pages/About.vue';

const routes: RouteRecordRaw[] = [
  { path: '/', component: () => import('pages/Home.vue') },
  { path: '/about', component: About }
];

export default routes;

Додамо посилання на сторінку:

<q-btn to="/about" label="Про нас" color="secondary" />

Стилізація та теми

Quasar має вбудовану темізацію та підтримує CSS-препроцесори (SASS/SCSS, LESS).

Змінити тему

Редагуємо quasar.config.js:

framework: {
  config: {
    brand: {
      primary: '#1E88E5',
      secondary: '#FFC107',
      accent: '#E91E63'
    }
  }
}

Додати стилі

Файл src/css/app.scss:

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f5f5f5;
}

Як створити PWA, мобільний або десктопний додаток?

Quasar дозволяє легко розгортати додаток на різних платформах.

1. Генерація PWA

quasar mode add pwa
quasar build -m pwa

2. Створення мобільного застосунку

quasar mode add capacitor
quasar dev -m capacitor -T android

3. Створення десктопного застосунку

quasar mode add electron
quasar dev -m electron

Висновок

Quasar Vue — це потужний фреймворк, який дозволяє створювати гнучкі, кросплатформенні застосунки з мінімальними зусиллями. Він містить величезну бібліотеку UI-компонентів, підтримує темізацію, адаптивність і різні платформи (Web, Mobile, Desktop).

Якщо ви працюєте з Vue 3, Quasar — один із найкращих варіантів для створення сучасних веб-застосунків 🚀.

💡 Почати можна прямо зараз:
👉 Офіційний сайт Quasar
👉 Документація