nails · hellopablo · Sep 8, 2026 · Sep 8, 2026
@@ -1,7 +1,7 @@
 {
     "extends": [
         "eslint:recommended",
-        "plugin:vue/recommended",
+        "plugin:vue/vue3-recommended",
     ],
     "env": {
         "browser": true,

@@ -7,41 +7,51 @@
  * 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';
 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);
 }
@@ -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: {

@@ -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);
     }
 }
 

@@ -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);
             }
         }
     }

@@ -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: {

@@ -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: {

@@ -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,21 +196,23 @@ 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);
         window.addEventListener('keydown', this.listener);
     },
 
 
-    beforeDestroy() {
+    beforeUnmount() {
+        this.$bus.$off('open-search-modal', this.onOpenSearchModal);
         window.removeEventListener('keydown', this.listener);
     },
 

@@ -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];