VueTools

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

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

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

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

• Vue 3 | 3.5.x | Реактивный фреймворк
• Pinia | 3.0.x | State management
• PrimeVue | 4.3.x | UI компоненты
• PrimeIcons | 7.0.x | Иконки

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

Плагин VueTools срабатывает на событие 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",
        "@vuetools/": "/assets/components/vuetools/composables/"
    }
}

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

1. Плагин VueTools (OnManagerPageInit)
2. Регистрирует Import Map в head админки (до ES modules)
3. Подключает CSS стили PrimeVue (изолированы .vueApp)
4. Ваш компонент загружает ES modules
5. Браузер разрешает импорты через Import Map

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

Пакет является зависимостью для MiniShop3, mSearch и других компонентов, которые используют единый визуальный стиль админки