Миграция с Quasar v1 на v2

В Quasar v2 произошёл переход на Vue 3, что напрямую повлияло на структуру проекта и конфигурацию. Основные изменения:

Composition API вместо Options API. Несмотря на то что Options API по-прежнему поддерживается, рекомендуем использовать Composition API для новых компонентов. Это влияет на синтаксис методов, реактивность и хуки жизненного цикла.
Изменение путей импорта компонентов. Теперь компоненты импортируются через quasar пакет напрямую, без привязки к отдельным папкам src/components. Например:

import { QBtn, QInput } from 'quasar'

Обновлённая структура папок. Папки boot, layouts, pages, components остались, но структура src/statics и src/assets подверглась уточнению. Ресурсы теперь рекомендуется размещать в src/assets, а глобальные статические файлы в public.

Обновления конфигурации Quasar CLI

quasar.conf.js → quasar.config.js. Файл конфигурации полностью переписан под формат экспорта функции. Новый синтаксис поддерживает Composition API:

/* quasar.config.js */
import { defineQuasarConfig } from 'quasar'

export default defineQuasarConfig({
  supportTS: true,
  build: {
    vueRouterMode: 'history'
  },
  cssAddon: true
})

Настройки плагинов теперь определяются через plugins с указанием их подключений и опций. Например:

plugins: [
  'Notify',
  { name: 'Dialog', options: { persistent: true } }
]

CSS-файлы и темы. SCSS и SASS остаются, но теперь тема Quasar задаётся через переменные в файле src/css/quasar.variables.scss.

Компоненты и их изменения

Многие компоненты Quasar v2 получили новые API и улучшенную поддержку TypeScript:

QTable
- Новая система фильтров и сортировки через Composition API.
- Поддержка v-model:pagination вместо устаревшего :pagination.sync.
- Обработка событий через emits:

<QTable
  :rows="rows"
  :columns="columns"
  v-model:pagination="pagination"
  @request="onRequest"
/>

QDialog и Notify
- Поддержка асинхронного вызова через промисы:

const result = await $q.dialog({
  title: 'Подтвердите',
  message: 'Вы уверены?'
}).onOk(() => true)

QSelect и QInput
- Используют v-model:model-value вместо старого v-model.
- Новый синтаксис событий: @update:model-value.

Работа с Vue Router и Vuex/Pinia

Vue Router v4. Обновление Quasar v2 подразумевает использование Vue Router 4. Основные отличия:

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('pages/Index.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

Pinia вместо Vuex. Quasar v2 рекомендует использовать Pinia для глобального состояния. Пример создания стора:

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', isLoggedIn: false }),
  actions: {
    login(name) { this.name = name; this.isLoggedIn = true }
  }
})

Изменения в Boot файлах

Boot файлы теперь поддерживают асинхронную инициализацию и имеют следующий синтаксис:

export default async ({ app, router, store, ssrContext }) => {
  app.config.globalProperties.$myPlugin = 'value'
}

Можно использовать Composition API внутри boot-файлов.
Поддержка SSR улучшена: контекст сервера передаётся через ssrContext.

Миграция тем и стилей

Темы разделены на светлую и тёмную. Настройка глобальной темы через:

import { dark } from 'quasar'

dark.set(true) // включение тёмной темы

SCSS-переменные обновлены, старые переменные из v1 могут не работать без корректировок.
Для кастомных стилей рекомендуется использовать src/css и импортировать через quasar.config.js.

Оптимизация сборки и производительности

Quasar v2 поддерживает ESM модули и tree-shaking, что уменьшает размер бандла.
Асинхронный импорт компонентов по необходимости:

const QChart = () => import('quasar/src/components/chart/QChart.vue')

Новый build pipeline улучшает совместимость с Vite и Webpack 5.
Поддержка PWA, SSR и Electron улучшена благодаря обновлённой конфигурации.

Проверка и исправление ошибок при миграции

Автоматическая проверка устаревших синтаксисов через quasar upgrade --check.
Замена v-model на новый синтаксис обязательна для корректной работы компонентов.
Проверка совместимости плагинов: многие старые плагины v1 требуют обновления.