vueTools
Back to Extras

vueTools

Shared Vue 3 stack for MODX 3.x components via ES Modules

Creator: Nikolay Savin (biz87)

1.1.1-pl

Need help installing this extra?

Screenshots

About 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.

    Information

    Released
    May 4, 2026

    Supported Database
    MySQL

    License
    GPLv2

    Supported Versions
    3.0 - <3.1

    Downloads
    0

    New in 1.1.1-pl

    Changelog

    All notable changes to this project will be documented in this file.

    The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

    [Unreleased]

    [1.1.1-pl] - 2026-02-10

    Fixed

    • Missing usePrimeVueLocale.min.js file in build

    Changed

    • Updated dependencies

    [1.1.0-pl] - 2026-02-05

    Added

    • PrimeVue localization: composable usePrimeVueLocale and locale presets (de, en, es, fr, pl, ru, uk)
    • getPrimeVueLocale(cultureKey?) returns PrimeVue locale for DataTable filters, DatePicker, Calendar; uses MODx.cultureKey when cultureKey omitted
    • Locales from primelocale package (dependency added)
    • Import Map: @vuetools/usePrimeVueLocale entry
    • DEVELOPER_GUIDE section "Локализация PrimeVue" and README usage example

    [1.0.1-pl] - 2026-01-01

    First beta release.

    Added

    • Vue 3.5.13 bundled as ES module
    • Pinia 3.0.1 bundled as ES module
    • PrimeVue 4.3.1 with Aura theme bundled as ES module
    • PrimeIcons 7.0.0 included
    • Import Map registration for browser module resolution
    • CSS isolation with .vueApp prefix (no conflicts with ExtJS)
    • Composables: useApi, useLexicon, useModx, usePermission
    • VueCoreManager plugin for automatic Import Map registration

    Changed

    • Renamed from ModxProVueCore to VueTools

    Current releases

    1.1.1-pl
    View | Download
    May 4, 2026
    3.0 - <3.1

    Visit WebsiteMore from Creator