VueTools - универсальный компонент оформления админки в MODX 3

Как вы наверное знаете, какое то время назад, при разработке MiniShop3 я анонсировал использование VUE + PrimeVue в админке, Поддержка современных возможностей JS, и просто, чуть более современного внешнего вида нам не помешает. Идея была реализована во множестве виджетов минишопа и показала себя удачной.

Чуть позже мы договорились с ребятами из modstore о новой реализации всем известных компонентов и я занялся проработкой mSearch для MODX 3. Разумеется использовать старые интерфейсы не хотелось, и имея свежий опыт переноса на VUE, я решил сделать то же самое, что в MiniShop3.

Но тут возник вопрос. Неужели придется в каждом следующем компоненте тянуть заново весь используемый фронтенд стек. Конфликтов, конечно не будет, но получится бессмысленный рост количества файлов в проекте. Естественным образом родилось решение вынести все переиспользуемые компоненты в отдельный пакет, который будет зависимостью для всех моих будущих компонентов. Так на свет появился VueTools



Представляю вашему вниманию VueTools — базовый пакет, предоставляющий Vue 3 стек для компонентов MODX 3.x через ES Modules Import Map.

Назначение

VueTools решает проблему дублирования библиотек при использовании Vue 3 в нескольких компонентах MODX. Вместо того чтобы каждый компонент включал свою копию Vue, Pinia и PrimeVue, все они используют общие библиотеки из VueTools.

Преимущества

• Единая версия библиотек — все компоненты используют одинаковые версии Vue, Pinia, PrimeVue
• Меньший размер загрузки — библиотеки загружаются один раз и кэшируются браузером
• Изолированные стили — PrimeVue стили не конфликтуют с ExtJS админки MODX
• Готовые composables — useLexicon, useApi, useModx, usePermission для работы с MODX

Состав пакета

• Vue 3 v3.5.x — Реактивный фреймворк
• Pinia v3.0.x — State management
• PrimeVue v4.3.x — UI компоненты
• PrimeIcons v7.0.x — Иконки

Composables (хелперы)

• useLexicon Работа с лексиконами MODX
• useApi HTTP клиент для стандартного MODX API
• useModx Доступ к глобальному объекту MODx
• usePermission Проверка прав пользователя

Архитектура

VueTools использует Import Map — стандартную технологию браузера для разрешения ES Module импортов.

Плагин VueToolsManager срабатывает на событие OnManagerPageInit и регистрирует Import Map в head страницы:

{
  "imports": {
    "vue": "/assets/components/vuetools/vendor/vue.min.js",
    "pinia": "/assets/components/vuetools/vendor/pinia.min.js",
    "primevue": "/assets/components/vuetools/vendor/primevue.min.js",
    "@vuetools/useApi": "/assets/components/vuetools/composables/useApi.min.js",
    "@vuetools/useLexicon": "/assets/components/vuetools/composables/useLexicon.min.js",
    "@vuetools/useModx": "/assets/components/vuetools/composables/useModx.min.js",
    "@vuetools/usePermission": "/assets/components/vuetools/composables/usePermission.min.js"
  }
}

Как это работает

• Плагин VueToolsManager (OnManagerPageInit) регистрирует Import Map в head (до ES modules)
• Подключает CSS стили PrimeVue (изолированы .vueApp)
• Ваш компонент (MiniShop3, mSearch) загружает ES modules
• Браузер разрешает импорты через Import Map

Когда Vue компонент выполняет import { ref } from 'vue', браузер находит ключ vue в Import Map и загружает файл по указанному пути.

Изоляция стилей

PrimeVue стили изолированы с помощью CSS префикса .vueApp. Это предотвращает конфликты с ExtJS стилями админки MODX.
Все контейнеры Vue виджетов должны иметь класс vueApp:

<!-- В ExtJS панели или HTML -->
<div id="my-vue-app" class="vueApp"></div>

Важно: Без класса vueApp стили PrimeVue не применятся к вашим компонентам.

Для разработчиков

Если вы разрабатываете компонент MODX и хотите использовать Vue 3 + PrimeVue — подготовлена документация с примерами использования. Постарался пошагово расписать как правильно собрать собственный компонент для админки с использованием VueTools

Документация, конечно же сыровата, буду дополнять ее по мере появления вопросов.