From 38d8c243f3f35c0fe899de03b0cf0a2d56b7f3bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20de=20la=20Pen=CC=83a?= <p@shedcollective.org>
Date: Tue, 8 Sep 2026 09:27:17 +0100
Subject: [PATCH] feat: migrate admin UI from Vue 2 to Vue 3

Vue 2 is EOL; keep the PHP in-DOM admin islands and dashboard widgets on Options API so they match Media Manager V2.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .eslintrc                                     |  2 +-
 assets/js/admin.ui.js                         | 50 +++++++++++--------
 assets/js/components/Dashboard/Grid.vue       |  8 +--
 assets/js/components/DashboardWidgets.js      | 14 +++---
 assets/js/components/admin-ui/CheckBox.vue    | 11 ++--
 assets/js/components/admin-ui/CreateModal.vue |  8 +--
 assets/js/components/admin-ui/FilterModal.vue | 11 ++--
 assets/js/components/admin-ui/SearchModal.vue | 44 ++++++++++++----
 assets/js/components/admin-ui/SideNav.vue     | 32 ++++++------
 .../sass/admin-plugins/DashboardWidgets.scss  | 25 ++++------
 assets/sass/admin.ui.scss                     |  3 +-
 package.json                                  | 16 +++---
 webpack.config.js                             | 17 +++++--
 13 files changed, 139 insertions(+), 102 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index adf1f103..0875b9f4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,7 +1,7 @@
 {
     "extends": [
         "eslint:recommended",
-        "plugin:vue/recommended",
+        "plugin:vue/vue3-recommended",
     ],
     "env": {
         "browser": true,
diff --git a/assets/js/admin.ui.js b/assets/js/admin.ui.js
index f1be42a7..30d6d47b 100644
--- a/assets/js/admin.ui.js
+++ b/assets/js/admin.ui.js
@@ -7,6 +7,8 @@
  * Source Imports 🛠
  */
 import '../sass/admin.ui.scss';
+import {createApp} from 'vue';
+import mitt from 'mitt';
 import CreateModal from './components/admin-ui/CreateModal.vue';
 import FilterModal from './components/admin-ui/FilterModal.vue';
 import MenuCollapse from './components/admin-ui/MenuCollapse.vue';
@@ -14,34 +16,42 @@ import MenuToggle from './components/admin-ui/MenuToggle.vue';
 import ModalButton from './components/admin-ui/ModalButton.vue';
 import SearchModal from './components/admin-ui/SearchModal.vue';
 import SideNav from './components/admin-ui/SideNav.vue';
-import Vue from 'vue/dist/vue.esm';
 import vSelect from 'vue-select';
 import VueSweetalert2 from 'vue-sweetalert2';
 
-Vue.component('v-select', vSelect);
-Vue.use(VueSweetalert2);
+const emitter = mitt();
+const $bus = {
+    $on: (...args) => emitter.on(...args),
+    $off: (...args) => emitter.off(...args),
+    $emit: (...args) => emitter.emit(...args),
+};
 
-/**
- * Component Imports 🏗
- */
-Vue.component('CreateModal', CreateModal);
-Vue.component('FilterModal', FilterModal);
-Vue.component('MenuCollapse', MenuCollapse);
-Vue.component('MenuToggle', MenuToggle);
-Vue.component('ModalButton', ModalButton);
-Vue.component('SearchModal', SearchModal);
-Vue.component('SideNav', SideNav);
-
-/**
- * Bus 🚌
- */
-Vue.prototype.$bus = new Vue();
+const components = {
+    'v-select': vSelect,
+    CreateModal,
+    FilterModal,
+    MenuCollapse,
+    MenuToggle,
+    ModalButton,
+    SearchModal,
+    SideNav,
+};
 
 /**
  * App kickoff 🚀
+ *
+ * Each .admin-vue-app island is a separate createApp() so PHP in-DOM
+ * templates (header, sidenav, footer) compile independently, while
+ * sharing one event bus and the same component / plugin registrations.
  */
 for (let el of document.getElementsByClassName('admin-vue-app')) {
-    new Vue({
-        el: el
+    const app = createApp({});
+
+    Object.entries(components).forEach(([name, component]) => {
+        app.component(name, component);
     });
+
+    app.use(VueSweetalert2);
+    app.config.globalProperties.$bus = $bus;
+    app.mount(el);
 }
diff --git a/assets/js/components/Dashboard/Grid.vue b/assets/js/components/Dashboard/Grid.vue
index fb663962..5a7ce4b2 100644
--- a/assets/js/components/Dashboard/Grid.vue
+++ b/assets/js/components/Dashboard/Grid.vue
@@ -28,7 +28,7 @@
             v-bind:class="classes.grid"
         >
             <grid-layout
-                :layout.sync="grid"
+                v-model:layout="grid"
                 :col-num="colNum"
                 :row-height="rowHeight"
                 :is-draggable="draggable"
@@ -98,7 +98,7 @@
 
 import API from '../API'
 import services from '../Services'
-import VueGridLayout from 'vue-grid-layout';
+import {GridLayout, GridItem} from 'grid-layout-plus';
 import Instance from '../Modal/Instance'
 
 let vm;
@@ -108,8 +108,8 @@ export default {
     name: 'DashboardGrid',
 
     components: {
-        GridLayout: VueGridLayout.GridLayout,
-        GridItem: VueGridLayout.GridItem
+        GridLayout,
+        GridItem
     },
 
     props: {
diff --git a/assets/js/components/DashboardWidgets.js b/assets/js/components/DashboardWidgets.js
index 40ed7030..05c6016e 100644
--- a/assets/js/components/DashboardWidgets.js
+++ b/assets/js/components/DashboardWidgets.js
@@ -1,5 +1,5 @@
 import Grid from './Dashboard/Grid.vue';
-import Vue from 'vue/dist/vue.esm';
+import {createApp, h} from 'vue';
 
 class DashboardWidgets {
 
@@ -42,15 +42,13 @@ class Instance {
         let userWidgets = JSON.parse(this.el.getAttribute('user-widgets')) || [];
 
         //  Initialise Vue
-        this.vue = new Vue({
-            el: this.el,
-            render: h => h(Grid, {
-                props: {
-                    adminController: adminController,
-                    userWidgets: userWidgets,
-                }
+        this.app = createApp({
+            render: () => h(Grid, {
+                adminController: adminController,
+                userWidgets: userWidgets,
             }),
         });
+        this.vue = this.app.mount(this.el);
     }
 }
 
diff --git a/assets/js/components/admin-ui/CheckBox.vue b/assets/js/components/admin-ui/CheckBox.vue
index 52c0a7b0..d283ad7b 100644
--- a/assets/js/components/admin-ui/CheckBox.vue
+++ b/assets/js/components/admin-ui/CheckBox.vue
@@ -14,17 +14,14 @@
 
 <script>
 export default {
-    model: {
-        prop: 'modelValue',
-        event: 'change'
-    },
     props: {
         value: {type: String, default: ''},
-        modelValue: {type: String, default: ''},
+        modelValue: {type: [String, Array, Boolean], default: ''},
         label: {type: String, required: true},
         trueValue: {type: Boolean, default: true},
         falseValue: {type: Boolean, default: false}
     },
+    emits: ['update:modelValue'],
     computed: {
         isChecked() {
             if (this.modelValue instanceof Array) {
@@ -47,9 +44,9 @@ export default {
                     newValue.splice(newValue.indexOf(this.value), 1);
                 }
 
-                this.$emit('change', newValue);
+                this.$emit('update:modelValue', newValue);
             } else {
-                this.$emit('change', isChecked ? this.trueValue : this.falseValue);
+                this.$emit('update:modelValue', isChecked ? this.trueValue : this.falseValue);
             }
         }
     }
diff --git a/assets/js/components/admin-ui/CreateModal.vue b/assets/js/components/admin-ui/CreateModal.vue
index 6aad9a9b..e8b34406 100644
--- a/assets/js/components/admin-ui/CreateModal.vue
+++ b/assets/js/components/admin-ui/CreateModal.vue
@@ -79,10 +79,11 @@ export default {
         };
     },
     mounted() {
-        this.$bus.$on('open-create-modal', () => {
+        this.onOpenCreateModal = () => {
             document.body.style.overflow = 'hidden';
             this.open = true;
-        });
+        };
+        this.$bus.$on('open-create-modal', this.onOpenCreateModal);
         //Keydown listener
         this.listener = (e) => this.keysTrigger(e.key);
         window.addEventListener('keydown', this.listener);
@@ -100,7 +101,8 @@ export default {
             });
 
     },
-    beforeDestroy() {
+    beforeUnmount() {
+        this.$bus.$off('open-create-modal', this.onOpenCreateModal);
         window.removeEventListener('keydown', this.listener);
     },
     methods: {
diff --git a/assets/js/components/admin-ui/FilterModal.vue b/assets/js/components/admin-ui/FilterModal.vue
index cf74c532..655abb14 100644
--- a/assets/js/components/admin-ui/FilterModal.vue
+++ b/assets/js/components/admin-ui/FilterModal.vue
@@ -104,6 +104,7 @@
     </transition>
 </template>
 <script>
+import {h} from 'vue';
 import CheckBox from './CheckBox.vue';
 
 export default {
@@ -126,20 +127,22 @@ export default {
             sort: 'Descending',
             lang: null,
             OpenIndicator: {
-                render: createElement => createElement('span', ''),
+                render: () => h('span', ''),
             },
         };
     },
     mounted() {
-        this.$bus.$on('open-filter-modal', () => {
+        this.onOpenFilterModal = () => {
             document.body.style.overflow = 'hidden';
             this.open = true;
-        });
+        };
+        this.$bus.$on('open-filter-modal', this.onOpenFilterModal);
         //Keydown listener
         this.listener = (e) => this.keysTrigger(e.key);
         window.addEventListener('keydown', this.listener);
     },
-    beforeDestroy() {
+    beforeUnmount() {
+        this.$bus.$off('open-filter-modal', this.onOpenFilterModal);
         window.removeEventListener('keydown', this.listener);
     },
     methods: {
diff --git a/assets/js/components/admin-ui/SearchModal.vue b/assets/js/components/admin-ui/SearchModal.vue
index a8e9c253..84d33f2b 100644
--- a/assets/js/components/admin-ui/SearchModal.vue
+++ b/assets/js/components/admin-ui/SearchModal.vue
@@ -63,7 +63,36 @@
                     <div
                         v-if="loading"
                         class="u-modal__body u-modal__body--empty">
-                        <Loader />
+                        <svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
+                            <g fill="none" fill-rule="evenodd">
+                                <g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
+                                    <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="1;0.5;0.5;0.5;0.5;0.5;0.5;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="49.063" cy="27.063" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;1;0.5;0.5;0.5;0.5;0.5;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="42.601" cy="42.663" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;0.5;1;0.5;0.5;0.5;0.5;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="27" cy="49.125" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;0.5;0.5;1;0.5;0.5;0.5;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="11.399" cy="42.663" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;0.5;0.5;0.5;1;0.5;0.5;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="4.938" cy="27.063" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;0.5;0.5;0.5;0.5;1;0.5;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="11.399" cy="11.462" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;0.5;0.5;0.5;0.5;0.5;1;0.5" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                    <circle cx="27" cy="5" r="5" fill-opacity="0.5" fill="#1d1d1d">
+                                        <animate attributeName="fill-opacity" begin="0s" dur="0.8s" values="0.5;0.5;0.5;0.5;0.5;0.5;0.5;1" calcMode="linear" repeatCount="indefinite" />
+                                    </circle>
+                                </g>
+                            </g>
+                        </svg>
                     </div>
                     <ul
                         v-else-if="filteredItems"
@@ -129,8 +158,6 @@ import API from '../API';
 import services from '../Services'
 import debounce from 'debounce'
 
-import Loader from '../../../svg/spinning-circles.svg';
-
 const COMMAND_KEYS = ['k', 'Escape']
 
 export default {
@@ -141,9 +168,6 @@ export default {
             default: 'Begin typing to search...'
         }
     },
-    components: {
-        Loader
-    },
     data() {
         return {
             open: false,
@@ -172,13 +196,14 @@ export default {
     mounted() {
 
         // Add open listener
-        this.$bus.$on('open-search-modal', () => {
+        this.onOpenSearchModal = () => {
             document.body.style.overflow = 'hidden';
             this.open = true;
             this.$nextTick(() => {
                 this.$refs.input.focus();
             });
-        });
+        };
+        this.$bus.$on('open-search-modal', this.onOpenSearchModal);
 
         //Keydown listener
         this.listener = (e) => this.keysTrigger(e);
@@ -186,7 +211,8 @@ export default {
     },
 
 
-    beforeDestroy() {
+    beforeUnmount() {
+        this.$bus.$off('open-search-modal', this.onOpenSearchModal);
         window.removeEventListener('keydown', this.listener);
     },
 
diff --git a/assets/js/components/admin-ui/SideNav.vue b/assets/js/components/admin-ui/SideNav.vue
index 8325cd69..0df82140 100644
--- a/assets/js/components/admin-ui/SideNav.vue
+++ b/assets/js/components/admin-ui/SideNav.vue
@@ -3,14 +3,13 @@
         <div class="sidenav">
             <vue-nestable
                 keyProp="key"
-                v-model="sidebarItems"
+                v-bind:value="sidebarItems"
+                v-on:input="sidebarItems = $event"
                 v-bind:max-depth="1"
                 v-bind:children-prop="'children'"
                 v-on:change="changeOrder"
             >
-                <template
-                    slot-scope="{ item }"
-                >
+                <template v-slot="{ item }">
                     <menu-collapse
                         v-if="item.actions && item.actions.length"
                         v-bind:title="item.label"
@@ -19,7 +18,7 @@
                         v-on:change="changeOrder"
                         v-on:toggle="toggleMenuItem(item)"
                     >
-                        <template slot="handler">
+                        <template v-slot:handler>
                             <VueNestableHandle
                                 v-bind:item="item"
                             >
@@ -122,14 +121,13 @@
         >
             <vue-nestable
                 keyProp="label"
-                v-model="sidebarItems"
+                v-bind:value="sidebarItems"
+                v-on:input="sidebarItems = $event"
                 v-bind:max-depth="1"
                 v-bind:children-prop="'children'"
                 v-on:change="changeOrder"
             >
-                <template
-                    slot-scope="{ item }"
-                >
+                <template v-slot="{ item }">
                     <menu-collapse
                         v-if="item.actions && item.actions.length"
                         v-bind:title="item.label"
@@ -138,7 +136,7 @@
                         v-on:change="changeOrder"
                         v-on:toggle="toggleMenuItem(item)"
                     >
-                        <template slot="handler">
+                        <template v-slot:handler>
                             <VueNestableHandle
                                 v-bind:item="item"
                             >
@@ -235,13 +233,11 @@
 </template>
 <script>
 import axios from 'axios';
-import { VueNestable, VueNestableHandle } from 'vue-nestable';
-import VueSimpleScrollbar from 'vue-simple-scrollbar';
+import {VueNestable, VueNestableHandle} from 'vue3-nestable';
 export default {
     components: {
         VueNestable,
-        VueNestableHandle,
-        VueSimpleScrollbar
+        VueNestableHandle
     },
     props: {
         menuItems: {
@@ -267,10 +263,14 @@ export default {
         }
     },
     mounted() {
-        this.$bus.$on('toggle-mobile-menu', (value) => {
+        this.onToggleMobileMenu = (value) => {
             document.body.style.overflow = value ? 'hidden' : 'auto';
             this.isMobileMenuOpen = value;
-        });
+        };
+        this.$bus.$on('toggle-mobile-menu', this.onToggleMobileMenu);
+    },
+    beforeUnmount() {
+        this.$bus.$off('toggle-mobile-menu', this.onToggleMobileMenu);
     },
     created() {
         this.items = [...this.menuItems];
diff --git a/assets/sass/admin-plugins/DashboardWidgets.scss b/assets/sass/admin-plugins/DashboardWidgets.scss
index 30d58105..d0c496e1 100644
--- a/assets/sass/admin-plugins/DashboardWidgets.scss
+++ b/assets/sass/admin-plugins/DashboardWidgets.scss
@@ -139,26 +139,23 @@
         }
     }
 
-    .vue-grid {
+    .vgl-layout {
+        margin-left: -10px;
+        margin-right: -10px;
+    }
 
-        &-layout {
-            margin-left: -10px;
-            margin-right: -10px;
-        }
+    .vgl-item {
+        > fieldset {
+            height: 100%;
+            overflow: hidden;
 
-        &-item {
-            > fieldset {
+            > div {
+                overflow: auto;
                 height: 100%;
-                overflow: hidden;
-
-                > div {
-                    overflow: auto;
-                    height: 100%;
-                }
             }
         }
 
-        &-placeholder {
+        &--placeholder {
             background-color: #fff !important;
             opacity: 1 !important;
             border: 1px dashed #ccc;
diff --git a/assets/sass/admin.ui.scss b/assets/sass/admin.ui.scss
index f8ac2746..02eb73ae 100644
--- a/assets/sass/admin.ui.scss
+++ b/assets/sass/admin.ui.scss
@@ -12,8 +12,7 @@
 
 // Vendor
 @import "admin-ui/vendor/bootstrap";
-@import "~vue-select/dist/vue-select";
-@import '~vue-simple-scrollbar/dist/vue-simple-scrollbar';
+@import "~vue-select/dist/vue-select.css";
 @import '~sweetalert2/dist/sweetalert2';
 
 // Reset and base files
diff --git a/package.json b/package.json
index 4e19b5e4..270387c7 100644
--- a/package.json
+++ b/package.json
@@ -23,19 +23,18 @@
         "cross-env": "^10.0",
         "css-loader": "^7.1",
         "debounce": "^3.0",
+        "grid-layout-plus": "^1.1.0",
         "mini-css-extract-plugin": "^2.6",
+        "mitt": "^3.0.1",
         "mustache": "^4.0",
         "postcss-loader": "^8.1",
         "sass": "^1.51",
         "sass-loader": "^17.0",
-        "vue": "^2.6",
-        "vue-grid-layout": "^2.3",
-        "vue-loader": "^15.9",
-        "vue-nestable": "^2.6",
-        "vue-select": "^3.18",
-        "vue-simple-scrollbar": "^0.1",
-        "vue-svg-loader": "^0.16",
+        "vue": "^3.5.24",
+        "vue-loader": "^17.4.2",
+        "vue-select": "4.0.0-beta.6",
         "vue-sweetalert2": "^5.0",
+        "vue3-nestable": "^3.0.3",
         "webpack": "^5.70",
         "webpack-cli": "^7.0",
         "webpack-dev-server": "^6.0"
@@ -44,7 +43,6 @@
         "@babel/core": "^8.0",
         "@babel/eslint-parser": "^8.0",
         "eslint": "^10.0",
-        "eslint-plugin-vue": "^10.3",
-        "vue-template-compiler": "^2.6"
+        "eslint-plugin-vue": "^10.3"
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 58826a4c..0ba7f23c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const {VueLoaderPlugin} = require('vue-loader');
 const path = require('path');
+const webpack = require('webpack');
 
 const mode = process.env.NODE_ENV || 'development';
 
@@ -18,6 +19,11 @@ module.exports = {
         path: path.resolve(__dirname, 'assets/js/'),
         publicPath: '/assets/js/'
     },
+    resolve: {
+        alias: {
+            vue: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js')
+        }
+    },
     module: {
         rules: [
             {
@@ -38,17 +44,18 @@ module.exports = {
                 test: /\.vue$/,
                 loader: 'vue-loader'
             },
-            {
-                test: /\.svg$/,
-                use: ['babel-loader', 'vue-svg-loader'],
-            },
         ]
     },
     plugins: [
         new MiniCssExtractPlugin({
             filename: '../css/[name].min.css'
         }),
-        new VueLoaderPlugin()
+        new VueLoaderPlugin(),
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__: JSON.stringify(true),
+            __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
+            __VUE_PROD_HYDRATE_MISMATCH_DETAILS__: JSON.stringify(false)
+        })
     ],
     devServer: {
         port: 9000,