Создание своего Quasar App Extension

Структура расширения:

/ui — npm package
/app-extension — Quasar app extension

Создание расширения используя Quasar CLI

Для создания через CLI можно воспользоваться стандартным конструктором quasar:

npm init quasar

Выбрать Quasar UI kit
Затем Quasar v2 (Vue 3 | latest and greatest)
После чего выбрать Vue component & Quasar App Extension.

По-умолчанию Quasar Extension создает скрипты на yarn, поэтому где надо меняем на npm.

Выполняем команды для установки всех зависимостей проекта ui:

cd ui
npm i

Screenshot 2022 11 01 at 21.29.15 — Команда npm run dev запускает сервер UI

Внутри директории app-extension можно сделать проверку на используемые в расширении библиотеки, систему сборки (vite, webpack) и расширить как угодно итоговый quasar.config.js.

При каждом обновлении внутри директории ui файлов на javascript и css не забывайте выполнять сборку. Сборку всего проекта можно выполнить следующей командой из директории ui:

npm run build

Подключение расширения через Quasar Ext

В основном проекте нужно добавить в package.json путь к расширению. Пока расширение не опубликовано в репозиторий npm, можно использовать файловую систему, npm позволяет это сделать следующей командой, на моем маке путь будет такой:

npm add --include=dev /Users/baskovsky.ru/my-example/app-extension
npm add --include=dev /Users/baskovsky.ru/my-example/ui

Убедитесь что пакеты правильно установились в package.json.

Установка расширения

Перед установкой убедитесь, что у вас установлен пакет @quasar/app-webpack.

В директории родительского проекта выполняем следующую команду, где my-example будем названием вашего расширения:

./node_modules/.bin/quasar ext invoke my-example

quasar extension my — Результат успешной установки

Чтобы не перезапускать проект каждый раз после модификации файлов директории ui, можно добавить слежение за обновлением файлов в основном проекте в файле quasar.config.js:

devServer: {
  // где "my-example" название вашего расширения
  watchFiles: [
    '/node_modules/quasar-app-extension-my-example/*'
  ]
}

Удаление расширения

Для удаления используйте команду, где my-example имя загруженного расширения:

quasar ext remove my-example

quasar ext remove — При удалении будут выполняться скрипт uninstall.js если он был создан

Если все расширения удаляются, то я рекомендую удалить заодно и файл quasar.extensions.json находящийся в корне основного проекта.

Starter Kit

Внутри Quasar CLI добавляет много лишнего, зато не читает компоненты написанные на расширении .vue. Мне это не понравилось и я решил создать свой стартовый плагин с именем quasar-app-extension-my-example. Я так же добавил простой компонент, чтобы воспользоваться которым, достаточно просто определить его в верстке.