diff --git a/assets/components/minishop3/js/mgr/utilities/utilities.js b/assets/components/minishop3/js/mgr/utilities/utilities.js
deleted file mode 100644
index c05b4dc4d..000000000
--- a/assets/components/minishop3/js/mgr/utilities/utilities.js
+++ /dev/null
@@ -1,37 +0,0 @@
-ms3.page.Utilities = function (config) {
-    config = config || {};
-    Ext.apply(config, {
-        formpanel: 'ms3-panel-utilities',
-        cls: 'container',
-        buttons: this.getButtons(config),
-        components: [{
-            xtype: 'ms3-panel-utilities'
-        }]
-    });
-    ms3.page.Utilities.superclass.constructor.call(this, config);
-};
-Ext.extend(ms3.page.Utilities, MODx.Component, {
-    getButtons: function (config) {
-        const b = [];
-
-        if (MODx.perm.mssetting_list) {
-            b.push({
-                text: _('ms3_orders'),
-                id: 'ms-abtn-orders',
-                cls: 'primary-button',
-                handler: function () {
-                    MODx.loadPage('?', 'a=mgr/orders&namespace=minishop3');
-                }
-            }, {
-                text: _('ms3_settings'),
-                id: 'ms2-abtn-settings',
-                handler: function () {
-                    MODx.loadPage('?', 'a=mgr/settings&namespace=minishop3');
-                }
-            });
-        }
-
-        return b;
-    }
-});
-Ext.reg('ms3-page-utilities', ms3.page.Utilities);
diff --git a/assets/components/minishop3/js/mgr/utilities/utilities.panel.js b/assets/components/minishop3/js/mgr/utilities/utilities.panel.js
deleted file mode 100644
index 27eb1f142..000000000
--- a/assets/components/minishop3/js/mgr/utilities/utilities.panel.js
+++ /dev/null
@@ -1,192 +0,0 @@
-ms3.panel.Utilities = function (config) {
-    config = config || {};
-    Ext.apply(config, {
-        cls: 'container',
-        items: [{
-            html: '<h2>' + _('ms3_header') + ' :: ' + _('ms3_utilities') + '</h2>',
-            cls: 'modx-page-header',
-        }, {
-            xtype: 'modx-tabs',
-            id: 'ms3-utilities-tabs',
-            cls: 'ms3-panel',
-            deferredRender: false,
-            listeners: {
-                afterrender: function(panel) {
-                    var savedId = localStorage.getItem('ms3-utilities-active-tab');
-                    if (savedId) {
-                        var tab = Ext.getCmp(savedId);
-                        if (tab) {
-                            panel.setActiveTab(tab);
-                        }
-                    }
-                    // Enable saving only after initial restore
-                    panel.tabStateReady = true;
-                },
-                tabchange: function(panel, tab) {
-                    if (!panel.tabStateReady) return;
-                    localStorage.setItem('ms3-utilities-active-tab', tab.id);
-                }
-            },
-            items: [{
-                title: _('ms3_utilities_gallery'),
-                id: 'ms3-utilities-gallery-tab',
-                layout: 'fit',
-                autoScroll: true,
-                items: [{
-                    xtype: 'panel',
-                    id: 'ms3-vue-utilities-gallery-panel',
-                    border: false,
-                    autoHeight: true,
-                    html: '<div id="ms3-vue-utilities-gallery" class="vueApp" style="min-height: 400px;"' +
-                          ' data-source-id="' + (ms3.config.utility_gallery_source_id || 1) + '"' +
-                          ' data-source-name="' + (ms3.config.utility_gallery_source_name || '') + '"' +
-                          ' data-total-products="' + (ms3.config.utility_gallery_total_products || 0) + '"' +
-                          ' data-total-files="' + (ms3.config.utility_gallery_total_products_files || 0) + '"' +
-                          ' data-thumbnails="' + encodeURIComponent(ms3.config.utility_gallery_thumbnails || '') + '"' +
-                          '></div>',
-                    listeners: {
-                        afterrender: function() {
-                            // Mount Vue application after panel render
-                            const event = new CustomEvent('ms3:mountVueUtilitiesGallery', {
-                                detail: {
-                                    targetId: '#ms3-vue-utilities-gallery'
-                                }
-                            });
-                            document.dispatchEvent(event);
-                        }
-                    }
-                }]
-            },
-                {
-                    title: _('ms3_utilities_import'),
-                    id: 'ms3-utilities-import-tab',
-                    layout: 'fit',
-                    autoScroll: true,
-                    items: [{
-                        xtype: 'panel',
-                        id: 'ms3-vue-import-panel',
-                        border: false,
-                        autoHeight: true,
-                        html: '<div id="ms3-vue-import" class="vueApp" style="min-height: 600px;"></div>',
-                        listeners: {
-                            afterrender: function() {
-                                // Mount Vue application after panel render
-                                const event = new CustomEvent('ms3:mountVueImport', {
-                                    detail: {
-                                        targetId: '#ms3-vue-import'
-                                    }
-                                });
-                                document.dispatchEvent(event);
-                            }
-                        }
-                    }]
-                },
-                {
-                    title: _('ms3_vue_product_fields_title'),
-                    id: 'ms3-utilities-fields-management-tab',
-                    layout: 'fit',
-                    autoScroll: true,
-                    items: [{
-                        xtype: 'panel',
-                        id: 'ms3-vue-fields-management-panel',
-                        border: false,
-                        autoHeight: true,
-                        html: '<div id="ms3-vue-fields-management" class="vueApp" style="min-height: 600px;"></div>',
-                        listeners: {
-                            afterrender: function() {
-                                // Mount Vue application after panel render
-                                const event = new CustomEvent('ms3:mountVueFieldsManagement', {
-                                    detail: {
-                                        targetId: '#ms3-vue-fields-management'
-                                    }
-                                });
-                                document.dispatchEvent(event);
-                            }
-                        }
-                    }]
-                },
-                {
-                    title: _('ms3_extra_fields_title'),
-                    id: 'ms3-utilities-extra-fields-tab',
-                    layout: 'fit',
-                    autoScroll: true,
-                    items: [{
-                        xtype: 'panel',
-                        id: 'ms3-vue-extra-fields-panel',
-                        border: false,
-                        autoHeight: true,
-                        html: '<div id="ms3-vue-extra-fields" class="vueApp" style="min-height: 600px;"></div>',
-                        listeners: {
-                            afterrender: function() {
-                                // Mount Vue application after panel render
-                                const event = new CustomEvent('ms3:mountVueExtraFields', {
-                                    detail: {
-                                        targetId: '#ms3-vue-extra-fields'
-                                    }
-                                });
-                                document.dispatchEvent(event);
-                            }
-                        }
-                    }]
-                },
-                {
-                    title: _('grid_fields_config_title'),
-                    id: 'ms3-utilities-grid-fields-config-tab',
-                    layout: 'fit',
-                    autoScroll: true,
-                    items: [{
-                        xtype: 'panel',
-                        id: 'ms3-vue-grid-fields-config-panel',
-                        border: false,
-                        autoHeight: true,
-                        html: '<div id="ms3-grid-fields-config-vue-wrapper" class="vueApp" style="min-height: 600px;"></div>',
-                        listeners: {
-                            afterrender: function() {
-                                // Mount Vue application after panel render
-                                const event = new CustomEvent('ms3:mountVueGridFieldsConfig', {
-                                    detail: {
-                                        targetId: '#ms3-grid-fields-config-vue-wrapper'
-                                    }
-                                });
-                                document.dispatchEvent(event);
-                            }
-                        }
-                    }]
-                },
-                {
-                    title: _('ms3_model_fields_title'),
-                    id: 'ms3-utilities-model-fields-tab',
-                    layout: 'fit',
-                    autoScroll: true,
-                    items: [{
-                        xtype: 'panel',
-                        id: 'ms3-vue-model-fields-panel',
-                        border: false,
-                        autoHeight: true,
-                        html: '<div id="ms3-model-fields-vue-wrapper" class="vueApp" style="min-height: 600px;"></div>',
-                        listeners: {
-                            afterrender: function() {
-                                // Mount Vue application after panel render
-                                const event = new CustomEvent('ms3:mountVueModelFields', {
-                                    detail: {
-                                        targetId: '#ms3-model-fields-vue-wrapper'
-                                    }
-                                });
-                                document.dispatchEvent(event);
-                            }
-                        }
-                    }]
-                }
-                // Old ExtJS "Object Extension" tab removed - using new Vue widget instead
-            ]
-        }]
-
-    });
-    ms3.panel.Utilities.superclass.constructor.call(this, config);
-
-    // fixExtraFieldsPanelHeight method removed along with old ExtJS widget
-};
-Ext.extend(ms3.panel.Utilities, MODx.Panel, {
-    // Old methods for ExtJS extra fields removed
-});
-Ext.reg('ms3-panel-utilities', ms3.panel.Utilities);
diff --git a/core/components/minishop3/controllers/mgr/utilities.class.php b/core/components/minishop3/controllers/mgr/utilities.class.php
index 52ffe8fbc..5c9e49e18 100644
--- a/core/components/minishop3/controllers/mgr/utilities.class.php
+++ b/core/components/minishop3/controllers/mgr/utilities.class.php
@@ -2,7 +2,6 @@
 
 use MiniShop3\Model\msProduct;
 use MiniShop3\Model\msProductFile;
-use MODX\Revolution\Sources\modMediaSource;
 
 if (!class_exists('msManagerController')) {
     require_once dirname(__FILE__, 2) . '/manager.class.php';
@@ -26,77 +25,73 @@ public function getLanguageTopics()
         return ['minishop3:default', 'minishop3:product', 'minishop3:manager', 'minishop3:vue'];
     }
 
-    /**
-     *
-     */
     public function loadCustomCssJs()
     {
-        $this->addCss($this->ms3->config['cssUrl'] . 'mgr/bootstrap.buttons.css');
-        $this->addCss($this->ms3->config['cssUrl'] . 'mgr/main.css');
-        // Gallery CSS now included in Vue component (utilities-gallery.min.css)
-
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/minishop3.js');
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/misc/default.grid.js');
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/misc/default.window.js');
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/misc/ms3.utils.js');
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/misc/ms3.combo.js');
-
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/utilities/utilities.js');
-        $this->addJavascript($this->ms3->config['jsUrl'] . 'mgr/utilities/utilities.panel.js');
-        // Import tab uses Vue (import.min.js); Ext import/panel.js removed (#522).
-
         $config = $this->ms3->config;
+        $config['mssetting_list'] = $this->modx->hasPermission('mssetting_list');
 
         $productSource = (int)$this->getOption('ms3_product_source_default', null, 1);
-        $source = null;
-        if ($productSource > 0) {
-            $source = $this->modx->getObject('sources.modMediaSource', $productSource);
-        }
+        $source = $productSource > 0
+            ? $this->modx->getObject('sources.modMediaSource', $productSource)
+            : null;
         if ($source) {
             $config['utility_gallery_source_id'] = $productSource;
             $config['utility_gallery_source_name'] = $source->get('name');
 
-            $properties = $source->get('properties');
+            $thumbnails = json_decode(
+                (string)($source->get('properties')['thumbnails']['value'] ?? ''),
+                true
+            );
             $propertiesString = '';
-            foreach (json_decode($properties['thumbnails']['value'], true) as $key => $value) {
-                $propertiesString .= "<strong>$key: </strong>" . json_encode($value) . "<br>";
+            if (is_array($thumbnails)) {
+                foreach ($thumbnails as $key => $value) {
+                    $propertiesString .= '<strong>' . htmlspecialchars((string)$key, ENT_QUOTES, 'UTF-8')
+                        . ': </strong>' . htmlspecialchars(json_encode($value), ENT_QUOTES, 'UTF-8') . '<br>';
+                }
             }
             $config['utility_gallery_thumbnails'] = $propertiesString;
         }
 
-        // get information about products and files
-        $config['utility_gallery_total_products'] = $this->modx->getCount(msProduct::class, ['class_key' => msProduct::class]);
-        $config['utility_gallery_total_products_files'] = $this->modx->getCount(msProductFile::class, ['parent_id' => 0]);
-
-        $config['utility_import_fields'] = $this->getOption('ms3_utility_import_fields', null, 'pagetitle,parent,price,article', true);
-        $config['utility_import_fields_delimiter'] = $this->getOption('ms3_utility_import_fields_delimiter', null, ';', true);
-
-        // CSS for Vue components
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/primeicons.min.css');
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/fields-management.min.css');
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/extra-fields.min.css');
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/grid-fields-config.min.css');
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/model-fields.min.css');
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/import.min.css');
-        $this->addCss($this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/utilities-gallery.min.css');
+        $config['utility_gallery_total_products'] = $this->modx->getCount(
+            msProduct::class,
+            ['class_key' => msProduct::class]
+        );
+        $config['utility_gallery_total_products_files'] = $this->modx->getCount(
+            msProductFile::class,
+            ['parent_id' => 0]
+        );
+
+        // Config must precede Vue modules (#524).
+        $this->addHtml(
+            '<script>var ms3 = { config: ' . json_encode($config) . ' };</script>'
+        );
+
+        $cssBase = $this->ms3->config['assetsUrl'] . 'css/mgr/vue-dist/';
+        foreach (['primeicons', 'utilities'] as $asset) {
+            $this->addCss($cssBase . $asset . '.min.css');
+        }
+        $this->addVueModule($this->ms3->config['jsUrl'] . 'mgr/vue-dist/utilities.min.js');
 
-        // Config MUST be set BEFORE Vue modules load (they read from ms3.config)
-        $this->addHtml('<script>Object.assign(ms3.config, ' . json_encode($config) . ');</script>');
+        $this->modx->invokeEvent('msOnManagerCustomCssJs', [
+            'controller' => $this,
+            'page' => 'utilities',
+        ]);
+    }
 
-        // Vue modules with VueTools dependency check
-        $assetsUrl = $this->ms3->config['assetsUrl'];
-        $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/fields-management.min.js');
-        $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/extra-fields.min.js');
-        $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/grid-fields-config.min.js');
-        $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/model-fields.min.js');
-        $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/import.min.js');
-        $this->addVueModule($assetsUrl . 'js/mgr/vue-dist/utilities-gallery.min.js');
+    /**
+     * @param array $scriptProperties
+     * @return mixed
+     */
+    public function process(array $scriptProperties = [])
+    {
+        return [];
+    }
 
-        $this->addHtml('
-        <script>
-            Ext.onReady(function() {
-                MODx.add({xtype: "ms3-page-utilities"});
-            });
-        </script>');
+    /**
+     * @return string
+     */
+    public function getTemplateFile()
+    {
+        return dirname(__FILE__, 3) . '/templates/default/utilities.tpl';
     }
 }
diff --git a/core/components/minishop3/templates/default/utilities.tpl b/core/components/minishop3/templates/default/utilities.tpl
new file mode 100644
index 000000000..f2ba0aeac
--- /dev/null
+++ b/core/components/minishop3/templates/default/utilities.tpl
@@ -0,0 +1,3 @@
+<div class="x-panel-body">
+    <div id="ms3-vue-utilities" class="vueApp" style="min-height: 400px;"></div>
+</div>
diff --git a/core/components/minishop3/tests/OrphanExtAssetsTest.php b/core/components/minishop3/tests/OrphanExtAssetsTest.php
index 377f5a1c1..f11caaa77 100644
--- a/core/components/minishop3/tests/OrphanExtAssetsTest.php
+++ b/core/components/minishop3/tests/OrphanExtAssetsTest.php
@@ -37,8 +37,13 @@
     $fail('utilities controller must not load utilities/import/panel.js (#522)');
 }
 
-if (preg_match('/addVueModule\([^;]*import\.min\.js/', $utilitiesController) !== 1) {
-    $fail('utilities controller must still register import.min.js Vue entry');
+// Import lives inside utilities.min.js after Phase 1c (#524 / #537), not a separate entry.
+if (preg_match('/addVueModule\([^;]*utilities\.min\.js/', $utilitiesController) !== 1) {
+    $fail('utilities controller must register utilities.min.js Vue entry (#524)');
+}
+
+if (preg_match('/addVueModule\([^;]*import\.min\.js/', $utilitiesController) === 1) {
+    $fail('utilities controller must not register separate import.min.js after utilities consolidation (#524)');
 }
 
 $scanRoots = [
diff --git a/core/components/minishop3/tests/UtilitiesVueEntryTest.php b/core/components/minishop3/tests/UtilitiesVueEntryTest.php
new file mode 100644
index 000000000..07d163d6b
--- /dev/null
+++ b/core/components/minishop3/tests/UtilitiesVueEntryTest.php
@@ -0,0 +1,151 @@
+<?php
+
+/**
+ * Utilities mgr page: Vue entry without Ext tabs (#524 / #521 Phase 1c).
+ *
+ * Run: php tests/UtilitiesVueEntryTest.php
+ */
+
+declare(strict_types=1);
+
+$fail = static function (string $message): never {
+    fwrite(STDERR, "FAIL: {$message}\n");
+    exit(1);
+};
+
+$assertRegex = static function (
+    string $haystack,
+    string $pattern,
+    string $label,
+    bool $mustMatch
+) use ($fail): void {
+    $matched = preg_match('#' . $pattern . '#', $haystack) === 1;
+    if ($mustMatch !== $matched) {
+        $fail($label . ($mustMatch ? ' must contain' : ' must not contain') . " /{$pattern}/");
+    }
+};
+
+$componentRoot = dirname(__DIR__);
+$repoRoot = dirname($componentRoot, 3);
+$assetsMgr = $repoRoot . '/assets/components/minishop3/js/mgr';
+
+foreach ([
+    $assetsMgr . '/utilities/utilities.js',
+    $assetsMgr . '/utilities/utilities.panel.js',
+    $assetsMgr . '/utilities/import/panel.js',
+] as $path) {
+    if (is_file($path)) {
+        $fail('Ext utilities asset must be deleted: ' . str_replace($repoRoot . '/', '', $path));
+    }
+}
+
+$tpl = $componentRoot . '/templates/default/utilities.tpl';
+$tplHtml = is_file($tpl) ? file_get_contents($tpl) : false;
+if ($tplHtml === false || !str_contains($tplHtml, 'id="ms3-vue-utilities"')) {
+    $fail('utilities.tpl must contain mount #ms3-vue-utilities');
+}
+
+$controller = file_get_contents($componentRoot . '/controllers/mgr/utilities.class.php');
+if ($controller === false) {
+    $fail('cannot read utilities controller');
+}
+
+foreach ([
+    'utilities\.js',
+    'utilities\.panel\.js',
+    'import/panel\.js',
+    'minishop3\.js',
+    'ms3\.combo\.js',
+    'default\.grid\.js',
+    'MODx\.add',
+    'Ext\.onReady',
+    'modx-tabs',
+    'fields-management\.min\.js',
+    'utilities-gallery\.min\.js',
+] as $pattern) {
+    $assertRegex($controller, $pattern, 'utilities controller', false);
+}
+
+foreach ([
+    'utilities\.min\.js',
+    'utilities\.tpl',
+    'var ms3',
+    'getTemplateFile',
+    'mssetting_list',
+    'utility_gallery_source_id',
+    '\.min\.css',
+    'primeicons',
+    'utilities',
+] as $pattern) {
+    $assertRegex($controller, $pattern, 'utilities controller', true);
+}
+
+$entry = $repoRoot . '/vueManager/src/entries/utilities.js';
+$page = $repoRoot . '/vueManager/src/components/UtilitiesPage.vue';
+$vite = $repoRoot . '/vueManager/vite.config.js';
+
+foreach ([$entry, $page, $vite] as $path) {
+    if (!is_file($path)) {
+        $fail('missing ' . str_replace($repoRoot . '/', '', $path));
+    }
+}
+
+$entrySrc = file_get_contents($entry);
+$pageSrc = file_get_contents($page);
+$viteSrc = file_get_contents($vite);
+if ($entrySrc === false || $pageSrc === false || $viteSrc === false) {
+    $fail('cannot read utilities Vue sources');
+}
+
+if (!str_contains($entrySrc, 'UtilitiesPage')) {
+    $fail('utilities entry must mount UtilitiesPage');
+}
+if (str_contains($entrySrc, 'waitForElement')) {
+    $fail('utilities entry must not use waitForElement');
+}
+if (str_contains($pageSrc, 'defineAsyncComponent')) {
+    $fail('UtilitiesPage must statically import tabs');
+}
+if (!str_contains($pageSrc, 'localStorage') || !str_contains($pageSrc, 'ms3-utilities-active-tab')) {
+    $fail('UtilitiesPage must persist active tab in localStorage');
+}
+
+foreach (
+    [
+        'gallery',
+        'import',
+        'fields-management',
+        'extra-fields',
+        'grid-fields-config',
+        'model-fields',
+    ] as $tabId
+) {
+    if (!str_contains($pageSrc, "'" . $tabId . "'") && !str_contains($pageSrc, '"' . $tabId . '"')) {
+        $fail("UtilitiesPage must declare tab {$tabId}");
+    }
+}
+
+if (!preg_match("/['\"]utilities['\"]\\s*:\\s*['\"]src\\/entries\\/utilities\\.js['\"]/", $viteSrc)) {
+    $fail('vite.config.js must include utilities entry');
+}
+
+foreach (
+    [
+        'fields-management',
+        'extra-fields',
+        'grid-fields-config',
+        'model-fields',
+        'import',
+        'utilities-gallery',
+    ] as $orphan
+) {
+    if (preg_match("/['\"]" . preg_quote($orphan, '/') . "['\"]\\s*:\\s*['\"]src\\/entries\\//", $viteSrc) === 1) {
+        $fail("vite.config.js must not keep orphan utilities tab entry {$orphan}");
+    }
+    if (is_file($repoRoot . '/vueManager/src/entries/' . $orphan . '.js')) {
+        $fail("orphan utilities tab entry must be deleted: vueManager/src/entries/{$orphan}.js");
+    }
+}
+
+fwrite(STDOUT, "OK UtilitiesVueEntryTest\n");
+exit(0);
diff --git a/vueManager/src/components/UtilitiesGallery.vue b/vueManager/src/components/UtilitiesGallery.vue
index d0d94c253..3bdbc8cbf 100644
--- a/vueManager/src/components/UtilitiesGallery.vue
+++ b/vueManager/src/components/UtilitiesGallery.vue
@@ -9,6 +9,7 @@ import ProgressBar from 'primevue/progressbar'
 import { computed, onMounted, ref } from 'vue'
 
 import request from '../request.js'
+import { getMs3Config } from '../utils/modx.js'
 
 const { _ } = useLexicon()
 
@@ -21,23 +22,19 @@ const formatString = (str, ...args) => {
   })
 }
 
-// Get configuration directly from ms3.config (reactive refs)
 const sourceId = ref(1)
 const sourceName = ref('')
 const totalProducts = ref(0)
 const totalFiles = ref(0)
 const thumbnailsInfo = ref('')
 
-// Load config from data-attributes of mount element
-const loadConfig = () => {
-  const el = document.getElementById('ms3-vue-utilities-gallery')
-  if (el) {
-    sourceId.value = parseInt(el.dataset.sourceId) || 1
-    sourceName.value = el.dataset.sourceName || ''
-    totalProducts.value = parseInt(el.dataset.totalProducts) || 0
-    totalFiles.value = parseInt(el.dataset.totalFiles) || 0
-    thumbnailsInfo.value = decodeURIComponent(el.dataset.thumbnails || '')
-  }
+function loadConfig() {
+  const cfg = getMs3Config() || {}
+  sourceId.value = parseInt(cfg.utility_gallery_source_id, 10) || 1
+  sourceName.value = cfg.utility_gallery_source_name || ''
+  totalProducts.value = parseInt(cfg.utility_gallery_total_products, 10) || 0
+  totalFiles.value = parseInt(cfg.utility_gallery_total_products_files, 10) || 0
+  thumbnailsInfo.value = cfg.utility_gallery_thumbnails || ''
 }
 
 // State
diff --git a/vueManager/src/components/UtilitiesPage.vue b/vueManager/src/components/UtilitiesPage.vue
new file mode 100644
index 000000000..92893d60f
--- /dev/null
+++ b/vueManager/src/components/UtilitiesPage.vue
@@ -0,0 +1,164 @@
+<script setup>
+import { useLexicon } from '@vuetools/useLexicon'
+import Button from 'primevue/button'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanel from 'primevue/tabpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import { ref, watch } from 'vue'
+
+import { getMs3Config } from '../utils/modx.js'
+import ExtraFieldsManager from './ExtraFieldsManager.vue'
+import FieldsManagement from './FieldsManagement.vue'
+import GridFieldsConfig from './GridFieldsConfig.vue'
+import ImportProducts from './ImportProducts.vue'
+import ModelFieldsGrid from './ModelFieldsGrid.vue'
+import UtilitiesGallery from './UtilitiesGallery.vue'
+
+const { _ } = useLexicon()
+
+const STORAGE_KEY = 'ms3-utilities-active-tab'
+
+/** Ext panel stored component ids; map to Vue tab ids. */
+const LEGACY_TAB_IDS = {
+  'ms3-utilities-gallery-tab': 'gallery',
+  'ms3-utilities-import-tab': 'import',
+  'ms3-utilities-fields-management-tab': 'fields-management',
+  'ms3-utilities-extra-fields-tab': 'extra-fields',
+  'ms3-utilities-grid-fields-config-tab': 'grid-fields-config',
+  'ms3-utilities-model-fields-tab': 'model-fields',
+}
+
+const tabs = [
+  {
+    id: 'gallery',
+    titleKey: 'ms3_utilities_gallery',
+    component: UtilitiesGallery,
+  },
+  {
+    id: 'import',
+    titleKey: 'ms3_utilities_import',
+    component: ImportProducts,
+  },
+  {
+    id: 'fields-management',
+    titleKey: 'ms3_vue_product_fields_title',
+    component: FieldsManagement,
+  },
+  {
+    id: 'extra-fields',
+    titleKey: 'ms3_extra_fields_title',
+    component: ExtraFieldsManager,
+  },
+  {
+    id: 'grid-fields-config',
+    titleKey: 'grid_fields_config_title',
+    component: GridFieldsConfig,
+  },
+  {
+    id: 'model-fields',
+    titleKey: 'ms3_model_fields_title',
+    component: ModelFieldsGrid,
+  },
+]
+
+const TAB_IDS = tabs.map(tab => tab.id)
+const DEFAULT_TAB = TAB_IDS[0]
+
+function tabIdFromStorage() {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    if (!saved) {
+      return DEFAULT_TAB
+    }
+    if (TAB_IDS.includes(saved)) {
+      return saved
+    }
+    return LEGACY_TAB_IDS[saved] || DEFAULT_TAB
+  } catch {
+    return DEFAULT_TAB
+  }
+}
+
+const activeTab = ref(tabIdFromStorage())
+const visited = ref({ [activeTab.value]: true })
+const canListSettings = Boolean(getMs3Config()?.mssetting_list)
+
+watch(activeTab, id => {
+  visited.value[id] = true
+  try {
+    localStorage.setItem(STORAGE_KEY, id)
+  } catch {
+    // ignore quota / private mode
+  }
+})
+
+function goTo(path) {
+  window.location.href = path
+}
+</script>
+
+<template>
+  <div class="ms3-utilities-page">
+    <div class="ms3-utilities-page__header">
+      <h2 class="ms3-utilities-page__title">
+        {{ _('ms3_header') }} :: {{ _('ms3_utilities') }}
+      </h2>
+      <div v-if="canListSettings" class="ms3-utilities-page__actions">
+        <Button
+          :label="_('ms3_orders')"
+          class="p-button-sm"
+          severity="contrast"
+          @click="goTo('?a=mgr/orders&namespace=minishop3')"
+        />
+        <Button
+          :label="_('ms3_settings')"
+          class="p-button-sm p-button-secondary"
+          @click="goTo('?a=mgr/settings&namespace=minishop3')"
+        />
+      </div>
+    </div>
+
+    <Tabs v-model:value="activeTab" class="ms3-utilities-page__tabs">
+      <TabList>
+        <Tab v-for="tab in tabs" :key="tab.id" :value="tab.id">
+          {{ _(tab.titleKey) }}
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel v-for="tab in tabs" :key="tab.id" :value="tab.id">
+          <component :is="tab.component" v-if="visited[tab.id]" />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </div>
+</template>
+
+<style scoped>
+.ms3-utilities-page {
+  padding: 1.25rem;
+}
+
+.ms3-utilities-page__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.ms3-utilities-page__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.ms3-utilities-page__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+</style>
diff --git a/vueManager/src/entries/extra-fields.js b/vueManager/src/entries/extra-fields.js
deleted file mode 100644
index b8b9af79d..000000000
--- a/vueManager/src/entries/extra-fields.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Entry point for Extra Fields Manager widget (ES Module)
- *
- * Exports initialization function for mounting Vue application
- */
-
-import '../scss/primevue.scss'
-import 'primeicons/primeicons.css'
-
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import Tooltip from 'primevue/tooltip'
-import { createApp } from 'vue'
-
-import VueExtraFieldsManager from '../components/ExtraFieldsManager.vue'
-import { injectFormStylesOverride } from '../utils/formStyles.js'
-
-/**
- * Creates and configures Vue application
- */
-function createVueApp() {
-  const app = createApp(VueExtraFieldsManager)
-
-  const pinia = createPinia()
-  app.use(pinia)
-
-  app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
-    locale: getPrimeVueLocale(),
-  })
-
-  app.use(ConfirmationService)
-  app.use(ToastService)
-
-  app.directive('tooltip', Tooltip)
-
-  return app
-}
-
-/**
- * Widget initialization
- * Called externally when switching to the tab
- */
-export function init(selector = '#ms3-vue-extra-fields') {
-  const $el = document.querySelector(selector)
-
-  if (!$el) {
-    console.warn(`[ExtraFields] Element ${selector} not found`)
-    return null
-  }
-
-  if ($el.dataset.vApp === 'true') {
-    return null
-  }
-
-  const app = createVueApp()
-  app.mount(selector)
-  injectFormStylesOverride()
-  $el.dataset.vApp = 'true'
-
-  return app
-}
-
-/**
- * Wait for ExtJS to create DOM element
- */
-function waitForElement(selector, callback) {
-  const element = document.querySelector(selector)
-  if (element) {
-    callback(element)
-    return
-  }
-
-  const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector)
-    if (element) {
-      observer.disconnect()
-      callback(element)
-    }
-  })
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
-}
-
-/**
- * Listen for mount event from ExtJS
- */
-document.addEventListener('ms3:mountVueExtraFields', e => {
-  const targetId = e.detail?.targetId || '#ms3-vue-extra-fields'
-  init(targetId)
-})
-
-/**
- * Automatic initialization - wait for element to appear
- */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-extra-fields', () => init('#ms3-vue-extra-fields'))
-  })
-} else {
-  waitForElement('#ms3-vue-extra-fields', () => init('#ms3-vue-extra-fields'))
-}
diff --git a/vueManager/src/entries/fields-management.js b/vueManager/src/entries/fields-management.js
deleted file mode 100644
index a92027226..000000000
--- a/vueManager/src/entries/fields-management.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * Entry point for Fields Management widget (ES Module)
- *
- * Exports initialization function for mounting Vue application
- */
-
-import '../scss/primevue.scss'
-import 'primeicons/primeicons.css'
-
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import { createApp } from 'vue'
-
-import VueFieldsManagement from '../components/FieldsManagement.vue'
-import { injectFormStylesOverride } from '../utils/formStyles.js'
-
-/**
- * Creates and configures Vue application
- */
-function createVueApp() {
-  const app = createApp(VueFieldsManagement)
-
-  const pinia = createPinia()
-  app.use(pinia)
-
-  app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
-    locale: getPrimeVueLocale(),
-  })
-
-  app.use(ConfirmationService)
-  app.use(ToastService)
-
-  return app
-}
-
-/**
- * Widget initialization
- * Called externally when switching to the tab
- */
-export function init(selector = '#vue-fields-management') {
-  const $el = document.querySelector(selector)
-
-  if (!$el) {
-    console.warn(`[Fields Management] Element ${selector} not found`)
-    return null
-  }
-
-  if ($el.dataset.vApp === 'true') {
-    // Already mounted
-    return null
-  }
-
-  const app = createVueApp()
-  app.mount(selector)
-  injectFormStylesOverride()
-  $el.dataset.vApp = 'true'
-
-  return app
-}
-
-/**
- * Wait for ExtJS to create DOM element
- */
-function waitForElement(selector, callback) {
-  const element = document.querySelector(selector)
-  if (element) {
-    callback(element)
-    return
-  }
-
-  const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector)
-    if (element) {
-      observer.disconnect()
-      callback(element)
-    }
-  })
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
-}
-
-/**
- * Listen for mount event from ExtJS
- */
-document.addEventListener('ms3:mountVueFieldsManagement', e => {
-  const targetId = e.detail?.targetId || '#ms3-vue-fields-management'
-  init(targetId)
-})
-
-/**
- * Automatic initialization - wait for element to appear
- */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-fields-management', () => init('#ms3-vue-fields-management'))
-  })
-} else {
-  waitForElement('#ms3-vue-fields-management', () => init('#ms3-vue-fields-management'))
-}
diff --git a/vueManager/src/entries/grid-fields-config.js b/vueManager/src/entries/grid-fields-config.js
deleted file mode 100644
index ee2fe56a5..000000000
--- a/vueManager/src/entries/grid-fields-config.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Entry point for Grid Fields Config widget (ES Module)
- *
- * Exports initialization function for mounting Vue application
- */
-
-import '../scss/primevue.scss'
-import 'primeicons/primeicons.css'
-
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import { createApp } from 'vue'
-
-import GridFieldsConfig from '../components/GridFieldsConfig.vue'
-import { injectFormStylesOverride } from '../utils/formStyles.js'
-
-/**
- * Creates and configures Vue application
- */
-function createVueApp() {
-  const app = createApp(GridFieldsConfig)
-
-  const pinia = createPinia()
-  app.use(pinia)
-
-  app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
-    locale: getPrimeVueLocale(),
-  })
-
-  app.use(ConfirmationService)
-  app.use(ToastService)
-
-  return app
-}
-
-/**
- * Widget initialization
- * Called when grid configuration page loads
- */
-export function init(selector = '#ms3-grid-fields-config-vue-wrapper') {
-  const $el = document.querySelector(selector)
-
-  if (!$el) {
-    return null
-  }
-
-  if ($el.dataset.vApp === 'true') {
-    return null
-  }
-
-  const app = createVueApp()
-  app.mount(selector)
-  injectFormStylesOverride()
-  $el.dataset.vApp = 'true'
-
-  return app
-}
-
-/**
- * Wait for ExtJS to create DOM element
- */
-function waitForElement(selector, callback) {
-  const element = document.querySelector(selector)
-  if (element) {
-    callback(element)
-    return
-  }
-
-  const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector)
-    if (element) {
-      observer.disconnect()
-      callback(element)
-    }
-  })
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
-}
-
-/**
- * Listen for custom event from ExtJS panel
- * Mount application when tab is rendered
- */
-document.addEventListener('ms3:mountVueGridFieldsConfig', event => {
-  const targetId = event.detail?.targetId || '#ms3-grid-fields-config-vue-wrapper'
-  init(targetId)
-})
-
-/**
- * Automatic initialization - wait for element to appear
- */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-grid-fields-config-vue-wrapper', () =>
-      init('#ms3-grid-fields-config-vue-wrapper')
-    )
-  })
-} else {
-  waitForElement('#ms3-grid-fields-config-vue-wrapper', () =>
-    init('#ms3-grid-fields-config-vue-wrapper')
-  )
-}
diff --git a/vueManager/src/entries/import.js b/vueManager/src/entries/import.js
deleted file mode 100644
index f4cf178fd..000000000
--- a/vueManager/src/entries/import.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Entry point for Import Products page (ES Module)
- *
- * Exports initialization function for mounting Vue application
- */
-
-import '../scss/primevue.scss'
-import 'primeicons/primeicons.css'
-
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import { createApp } from 'vue'
-
-import ImportProducts from '../components/ImportProducts.vue'
-import { injectFormStylesOverride } from '../utils/formStyles.js'
-
-let app = null
-
-/**
- * Creates and configures Vue application
- */
-function createVueApp() {
-  const vueApp = createApp(ImportProducts)
-
-  vueApp.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        prefix: 'p',
-        darkModeSelector: '.ms3-dark-mode',
-        cssLayer: false,
-      },
-    },
-    locale: getPrimeVueLocale(),
-  })
-
-  vueApp.use(ConfirmationService)
-  vueApp.use(ToastService)
-
-  return vueApp
-}
-
-/**
- * Widget initialization
- */
-export function init(selector = '#ms3-vue-import') {
-  const $el = document.querySelector(selector)
-
-  if (!$el) {
-    console.warn(`[MS3 Import] Target element not found: ${selector}`)
-    return null
-  }
-
-  if ($el.dataset.vApp === 'true') {
-    return null
-  }
-
-  // Unmount existing app if any
-  if (app) {
-    app.unmount()
-  }
-
-  app = createVueApp()
-  app.mount(selector)
-  injectFormStylesOverride()
-  $el.dataset.vApp = 'true'
-
-  return app
-}
-
-/**
- * Unmount the application
- */
-export function unmount() {
-  if (app) {
-    app.unmount()
-    app = null
-  }
-}
-
-/**
- * Wait for ExtJS to create DOM element
- */
-function waitForElement(selector, callback) {
-  const element = document.querySelector(selector)
-
-  if (element) {
-    callback(element)
-    return
-  }
-
-  const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector)
-    if (element) {
-      observer.disconnect()
-      callback(element)
-    }
-  })
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
-}
-
-// Listen for mount event from ExtJS
-document.addEventListener('ms3:mountVueImport', event => {
-  const targetId = event.detail?.targetId || '#ms3-vue-import'
-  init(targetId)
-})
-
-/**
- * Automatic initialization on DOM load
- */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-import', () => init())
-  })
-} else {
-  waitForElement('#ms3-vue-import', () => init())
-}
-
-// Export for programmatic usage
-export default { init, unmount }
diff --git a/vueManager/src/entries/model-fields.js b/vueManager/src/entries/model-fields.js
deleted file mode 100644
index 81ac20c24..000000000
--- a/vueManager/src/entries/model-fields.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Entry point for Model Fields Management widget (ES Module)
- *
- * Exports initialization function for mounting Vue application
- */
-
-import '../scss/primevue.scss'
-import 'primeicons/primeicons.css'
-
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import { createPinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import ConfirmationService from 'primevue/confirmationservice'
-import ToastService from 'primevue/toastservice'
-import { createApp } from 'vue'
-
-import ModelFieldsGrid from '../components/ModelFieldsGrid.vue'
-import { injectFormStylesOverride } from '../utils/formStyles.js'
-
-/**
- * Creates and configures Vue application
- */
-function createVueApp() {
-  const app = createApp(ModelFieldsGrid)
-  const pinia = createPinia()
-
-  app.use(pinia)
-
-  app.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        darkModeSelector: 'none',
-      },
-    },
-    locale: getPrimeVueLocale(),
-  })
-
-  app.use(ConfirmationService)
-  app.use(ToastService)
-
-  return app
-}
-
-/**
- * Widget initialization
- * Called when Model Fields page loads
- */
-export function init(selector = '#ms3-model-fields-vue-wrapper') {
-  const $el = document.querySelector(selector)
-
-  if (!$el) {
-    return null
-  }
-
-  if ($el.dataset.vApp === 'true') {
-    return null
-  }
-
-  const app = createVueApp()
-  app.mount(selector)
-  injectFormStylesOverride()
-  $el.dataset.vApp = 'true'
-
-  return app
-}
-
-/**
- * Wait for ExtJS to create DOM element
- * Uses MutationObserver to track element appearance
- */
-function waitForElement(selector, callback) {
-  const element = document.querySelector(selector)
-
-  if (element) {
-    callback(element)
-    return
-  }
-
-  const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector)
-    if (element) {
-      observer.disconnect()
-      callback(element)
-    }
-  })
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
-}
-
-/**
- * Automatic initialization on DOM load
- */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-model-fields-vue-wrapper', () => init())
-  })
-} else {
-  waitForElement('#ms3-model-fields-vue-wrapper', () => init())
-}
diff --git a/vueManager/src/entries/utilities-gallery.js b/vueManager/src/entries/utilities-gallery.js
deleted file mode 100644
index 56cf5773e..000000000
--- a/vueManager/src/entries/utilities-gallery.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * Entry point for Utilities Gallery page (ES Module)
- *
- * Exports initialization function for mounting Vue application
- */
-
-import '../scss/primevue.scss'
-import 'primeicons/primeicons.css'
-
-import Aura from '@primeuix/themes/aura'
-import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
-import PrimeVue from 'primevue/config'
-import ToastService from 'primevue/toastservice'
-import { createApp } from 'vue'
-
-import UtilitiesGallery from '../components/UtilitiesGallery.vue'
-import { injectFormStylesOverride } from '../utils/formStyles.js'
-
-let app = null
-
-/**
- * Creates and configures Vue application
- */
-function createVueApp(props = {}) {
-  const vueApp = createApp(UtilitiesGallery, props)
-  vueApp.use(PrimeVue, {
-    theme: {
-      preset: Aura,
-      options: {
-        prefix: 'p',
-        darkModeSelector: '.ms3-dark-mode',
-        cssLayer: false,
-      },
-    },
-    locale: getPrimeVueLocale(),
-  })
-
-  vueApp.use(ToastService)
-
-  return vueApp
-}
-
-/**
- * Widget initialization
- */
-export function init(selector = '#ms3-vue-utilities-gallery') {
-  const $el = document.querySelector(selector)
-
-  if (!$el) {
-    console.warn('[Gallery] Element not found:', selector)
-    return null
-  }
-
-  if ($el.dataset.vApp === 'true') {
-    return null
-  }
-
-  // Unmount existing app if any
-  if (app) {
-    app.unmount()
-  }
-
-  // Component reads config from data-attributes set by ExtJS
-  app = createVueApp()
-  app.mount(selector)
-  injectFormStylesOverride()
-  $el.dataset.vApp = 'true'
-
-  return app
-}
-
-/**
- * Unmount the application
- */
-export function unmount() {
-  if (app) {
-    app.unmount()
-    app = null
-  }
-}
-
-/**
- * Wait for ExtJS to create DOM element
- */
-function waitForElement(selector, callback) {
-  const element = document.querySelector(selector)
-
-  if (element) {
-    callback(element)
-    return
-  }
-
-  const observer = new MutationObserver(() => {
-    const element = document.querySelector(selector)
-    if (element) {
-      observer.disconnect()
-      callback(element)
-    }
-  })
-
-  observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-  })
-}
-
-// Listen for mount event from ExtJS
-document.addEventListener('ms3:mountVueUtilitiesGallery', event => {
-  const targetId = event.detail?.targetId || '#ms3-vue-utilities-gallery'
-  init(targetId)
-})
-
-/**
- * Automatic initialization on DOM load
- */
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', () => {
-    waitForElement('#ms3-vue-utilities-gallery', () => init())
-  })
-} else {
-  waitForElement('#ms3-vue-utilities-gallery', () => init())
-}
-
-// Export for programmatic usage
-export default { init, unmount }
diff --git a/vueManager/src/entries/utilities.js b/vueManager/src/entries/utilities.js
new file mode 100644
index 000000000..db8bccda4
--- /dev/null
+++ b/vueManager/src/entries/utilities.js
@@ -0,0 +1,49 @@
+/**
+ * Utilities page entry — Vue shell instead of Ext panel (#524).
+ */
+
+import '../scss/primevue.scss'
+import 'primeicons/primeicons.css'
+
+import Aura from '@primeuix/themes/aura'
+import { getPrimeVueLocale } from '@vuetools/usePrimeVueLocale'
+import { createPinia } from 'pinia'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import { createApp } from 'vue'
+
+import UtilitiesPage from '../components/UtilitiesPage.vue'
+import { injectFormStylesOverride } from '../utils/formStyles.js'
+
+export function init(selector = '#ms3-vue-utilities') {
+  const $el = document.querySelector(selector)
+  if (!$el || $el.dataset.vApp === 'true') {
+    return null
+  }
+
+  const app = createApp(UtilitiesPage)
+  app.use(createPinia())
+  app.use(PrimeVue, {
+    theme: {
+      preset: Aura,
+      options: {
+        darkModeSelector: 'none',
+      },
+    },
+    locale: getPrimeVueLocale(),
+  })
+  app.use(ConfirmationService)
+  app.use(ToastService)
+  app.mount(selector)
+  injectFormStylesOverride()
+  $el.dataset.vApp = 'true'
+
+  return app
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => init())
+} else {
+  init()
+}
diff --git a/vueManager/vite.config.js b/vueManager/vite.config.js
index 6c7b15e8c..f2f7fd584 100644
--- a/vueManager/vite.config.js
+++ b/vueManager/vite.config.js
@@ -19,21 +19,16 @@ const DevInput = {
 }
 
 const ProdInput = {
-  'fields-management': 'src/entries/fields-management.js',
-  'extra-fields': 'src/entries/extra-fields.js',
   'product-tabs': 'src/entries/product-tabs.js',
   'customers': 'src/entries/customers.js',
   'orders': 'src/entries/orders.js',
   'order': 'src/entries/order.js',
   'notifications': 'src/entries/notifications.js',
-  'model-fields': 'src/entries/model-fields.js',
-  'grid-fields-config': 'src/entries/grid-fields-config.js',
-  'import': 'src/entries/import.js',
-  'utilities-gallery': 'src/entries/utilities-gallery.js',
   'category-options': 'src/entries/category-options.js',
   'category-products': 'src/entries/category-products.js',
   'help': 'src/entries/help.js',
   'settings': 'src/entries/settings.js',
+  'utilities': 'src/entries/utilities.js',
   'main': 'src/main.js'
 }
 // https://vite.dev/config/