vueTools

VueTools solves the problem of library duplication when using Vue 3 across multiple MODX components. Instead of each component bundling its own copy of Vue, Pinia, and PrimeVue, they all share common libraries provided by VueTools.

Benefits

Single library version — all components use the same versions of Vue, Pinia, and PrimeVue

Smaller download size — libraries are loaded once and cached by the browser

Isolated styles — PrimeVue styles don't conflict with the MODX ExtJS manager

Built-in composables — useLexicon, useApi, useModx, usePermission for working with MODX

Package contents

Vue 3 | 3.5.x | Reactive framework

Pinia | 3.0.x | State management

PrimeVue | 4.3.x | UI components

PrimeIcons | 7.0.x | Icons

Architecture

VueTools uses Import Maps — a native browser standard for resolving ES Module imports.

The VueTools plugin hooks into the OnManagerPageInit event and registers an Import Map in the manager <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/" } }

How it works

The VueTools plugin fires on OnManagerPageInit

Registers the Import Map in the manager (before any ES modules)

Loads PrimeVue CSS styles (scoped to .vueApp)

Your component loads its ES modules

The browser resolves imports through the Import Map

When a Vue component executes import { ref } from 'vue', the browser finds the vue key in the Import Map and loads the file from the specified path. This package is a dependency for MiniShop3, mSearch, and other components that share a unified visual style in the manager.

[1.2.1-pl] - 2026-09-24

Changed

• Modx theme follows the MODX 3 manager more closely (#46): a Button with no severity uses the green .primary-button fill (#6CB24A), same as severity="success"; navy #234368 stays on tabs, links and selection
• Modx theme: single-line fields are 32px (modx.field.height), buttons stay 36px (modx.control.height) (#46)
• Modx theme: ToggleSwitch, Slider, ProgressBar, Checkbox, RadioButton, DatePicker, Dialog, DataTable, Paginator, Tabs, Tooltip, Toast and menus restyled to the manager (#46)
• DEVELOPER_GUIDE: version-aware VueTools check for theming consumers (#25)
• GitHub issue and pull request templates (#45)

Fixed

• Modx theme: DatePicker, Slider and ProgressBar light overrides follow darkModeSelector, including a .p-dark subtree (#48)
• Line endings normalized to LF via .gitattributes (#48)

[1.2.0-pl] - 2026-09-14

Added

• Native MODX 3 manager theme Modx for PrimeVue 4 (Nora base, splash #234368, 3px radius, 13px body)
• Helpers ModxManagerTheme (darkModeSelector: 'none') and ModxTheme (class .p-dark)
• Centralized theming (#22): system setting vuetools.theme (default aura), window.VueTools injection, @vuetools/useTheme / getActiveTheme() with Aura fallback
• Preset registry (aura, modx) inside VueTools; new themes register only here
• Import Map aliases vuetools and vuetools/theme (same bundle as primevue; vuetools/theme is the version-aware theming signal)
• Theme showcase: npm run demo / npm run build:demo (src/demo/, vite.config.demo.js)
• Asset ?v= cache-bust via filemtime for vendor/composables
• System setting combo vuetools-combo-theme (aura | modx) for vuetools.theme

Fixed

• One VueTools service under both vuetools and vueTools keys, so Import Map and CSS are not registered twice (#11)

Changed

• README and DEVELOPER_GUIDE: prefer getActiveTheme(); Save = severity="success"; token layers
• Backward compatible: extras that hardcode Aura / ModxManagerTheme keep working unchanged

Security

• Consolidated build dependency bumps: vite, postcss, nanoid, brace-expansion (#21)