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

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

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

npm init quasar

1. Выбрать Quasar UI kit

2. Затем Quasar v2 (Vue 3 | latest and greatest)

3. После чего выбрать Vue component & Quasar App Extension.

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

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

cd ui
npm i

Внутри директории 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/myuser/my-example/app-extension
npm add --include=dev /Users/myuser/my-example/ui

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

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

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

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

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

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

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

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

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

quasar ext remove my-example

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

Starter Kit

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

Документация по созданию расширения