Бесплатно
Загрузите дополнение из админки вашего сайта.
Как загрузить?
Как загрузить?
Внимание, этот компонент требует PHP
8.1
или выше!
Внимание, этот компонент требует MODX 3 или выше.
VueTools решает проблему дублирования библиотек при использовании Vue 3 в нескольких компонентах MODX. Вместо того чтобы каждый компонент включал свою копию Vue, Pinia и PrimeVue, все они используют общие библиотеки из VueTools.
Преимущества
Состав пакета
Архитектура
VueTools использует Import Map — стандартную технологию браузера для разрешения ES Module импортов.
Плагин VueTools срабатывает на событие OnManagerPageInit и регистрирует Import Map в head админки:
Как это работает
Когда Vue компонент выполняет import { ref } from 'vue', браузер находит ключ `vue` в Import Map и загружает файл по указанному пути.
Пакет является зависимостью для MiniShop3, mSearch и других компонентов, которые используют единый визуальный стиль админки
Преимущества
- Единая версия библиотек — все компоненты используют одинаковые версии 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/"
}
}Как это работает
- Плагин VueTools (OnManagerPageInit)
- Регистрирует Import Map в head админки (до ES modules)
- Подключает CSS стили PrimeVue (изолированы .vueApp)
- Ваш компонент загружает ES modules
- Браузер разрешает импорты через Import Map
Когда Vue компонент выполняет import { ref } from 'vue', браузер находит ключ `vue` в Import Map и загружает файл по указанному пути.
Пакет является зависимостью для MiniShop3, mSearch и других компонентов, которые используют единый визуальный стиль админки
Журнал изменений
Все заметные изменения проекта фиксируются в этом файле.
Формат основан на Keep a Changelog, проект следует семантическому версионированию.
[1.2.1-pl] - 2026-09-24
Изменено
- Тема Modx точнее повторяет менеджер MODX 3 (#46): кнопка без severity получает зелёную заливку
.primary-button(#6CB24A), как иseverity="success"; тёмно-синий#234368остаётся на вкладках, ссылках и выделении - Тема Modx: однострочные поля — 32px (
modx.field.height), кнопки остаются 36px (modx.control.height) (#46) - Тема Modx: ToggleSwitch, Slider, ProgressBar, Checkbox, RadioButton, DatePicker, Dialog, DataTable, Paginator, Tabs, Tooltip, Toast и меню оформлены под менеджер (#46)
- DEVELOPER_GUIDE: проверка версии VueTools для компонентов, использующих темизацию (#25)
- Шаблоны issue и pull request для GitHub (#45)
Исправлено
- Тема Modx: светлые переопределения DatePicker, Slider и ProgressBar следуют
darkModeSelector, в том числе внутри поддерева.p-dark(#48) - Окончания строк приведены к LF через
.gitattributes(#48)
[1.2.0-pl] - 2026-09-14
Добавлено
- Нативная тема менеджера MODX 3
Modxдля PrimeVue 4 (основа Nora, акцент#234368, скругление 3px, основной текст 13px) - Хелперы
ModxManagerTheme(darkModeSelector: 'none') иModxTheme(класс.p-dark) - Централизованная темизация (#22): системная настройка
vuetools.theme(по умолчаниюaura), внедрениеwindow.VueTools,@vuetools/useTheme/getActiveTheme()с откатом на Aura - Реестр пресетов (
aura,modx) внутри VueTools; новые темы регистрируются только здесь - Алиасы Import Map
vuetoolsиvuetools/theme(тот же бандл, что иprimevue;vuetools/themeслужит признаком версии с поддержкой темизации) - Витрина темы:
npm run demo/npm run build:demo(src/demo/,vite.config.demo.js) - Сброс кеша ассетов через
?v=по filemtime для vendor/composables - Системная настройка-комбо
vuetools-combo-theme(aura|modx) дляvuetools.theme
Исправлено
- Один сервис VueTools под ключами
vuetoolsиvueTools, чтобы Import Map и CSS не регистрировались дважды (#11)
Изменено
- README и DEVELOPER_GUIDE: рекомендуется
getActiveTheme(); Сохранить =severity="success"; уровни токенов - Обратная совместимость: компоненты, жёстко задающие
Aura/ModxManagerTheme, продолжают работать без изменений
Безопасность
- Сводное обновление зависимостей сборки:
vite,postcss,nanoid,brace-expansion(#21)
[1.1.2-pl] - 2026-06-15
Добавлено
- Класс
VueTools\Service, чтобы MODX находил сервисvuetoolsпо стандартному путиmodel/vuetools/(#6)
Изменено
- Пакет тем PrimeVue
@primevue/themesзаменён на поддерживаемый@primeuix/themes(#9) - Обновлён встроенный стек: Vue 3.5.32, Pinia 3.0.4, PrimeVue 4.5.5;
primelocale^2.3.1 (#9) - Жёстко заданные
$versionsвVueCoreсинхронизированы с поставляемыми бандлами (#13) postcssобновлён до 8.5.15 — включает исправления безопасности (#12)
[1.1.1-pl] - 2026-02-10
Исправлено
- В сборке отсутствовал файл
usePrimeVueLocale.min.js
Изменено
- Обновлены зависимости
[1.1.0-pl] - 2026-02-05
Добавлено
- Локализация PrimeVue: composable
usePrimeVueLocaleи пресеты локалей (de, en, es, fr, pl, ru, uk) getPrimeVueLocale(cultureKey?)возвращает локаль PrimeVue для фильтров DataTable, DatePicker, Calendar; без cultureKey используетMODx.cultureKey- Локали из пакета primelocale (добавлен в зависимости)
- Import Map: запись
@vuetools/usePrimeVueLocale - Раздел DEVELOPER_GUIDE «Локализация PrimeVue» и пример использования в README
[1.0.1-pl] - 2026-01-01
Первый бета-релиз.
Добавлено
- Vue 3.5.13 в виде ES-модуля
- Pinia 3.0.1 в виде ES-модуля
- PrimeVue 4.3.1 с темой Aura в виде ES-модуля
- PrimeIcons 7.0.0
- Регистрация Import Map для разрешения модулей в браузере
- Изоляция CSS префиксом
.vueApp(без конфликтов с ExtJS) - Composables: useApi, useLexicon, useModx, usePermission
- Плагин VueCoreManager для автоматической регистрации Import Map
Изменено
- Переименовано из ModxProVueCore в VueTools




Последние обсуждения в сообществе MODX.pro