vueTools

Package Description

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** 1. Single library version — all components use the same versions of Vue, Pinia, and PrimeVue 2. Smaller download size — libraries are loaded once and cached by the browser 3. Isolated styles — PrimeVue styles don't conflict with the MODX ExtJS manager 4. Built-in composables — useLexicon, useApi, useModx, usePermission for working with MODX **Package contents** 1. Vue 3 | 3.5.x | Reactive framework 2. Pinia | 3.0.x | State management 3. PrimeVue | 4.3.x | UI components 4. 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 ``: ``` { "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** 1. The VueTools plugin fires on OnManagerPageInit 2. Registers the Import Map in the manager (before any ES modules) 3. Loads PrimeVue CSS styles (scoped to .vueApp) 4. Your component loads its ES modules 5. 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.