[5.x] Upgrade from Vue 2 to Vue 3

package.json

@@ -7,7 +7,7 @@
         "watch": "vite build --watch"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue2": "^2.3.1",
+        "@vitejs/plugin-vue": "^5.1.3",
         "axios": "^1.7.4",
         "bootstrap": "~5.1.3",
         "chart.js": "^2.9.4",
@@ -19,8 +19,8 @@
         "sass": "^1.74.1",
         "sql-formatter": "^4.0.2",
         "vite": "^5.2.8",
-        "vue": "^2.7.16",
-        "vue-json-pretty": "^1.9.5",
-        "vue-router": "^3.6.5"
+        "vue": "^3.5.4",
+        "vue-json-pretty": "^2.4.0",
+        "vue-router": "^4.4.4"
     }
 }

resources/js/app.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
-import Vue from 'vue/dist/vue.esm.js';
-import VueRouter from 'vue-router';
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import { createRouter, createWebHistory } from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 import Base from './base';
@@ -16,9 +16,22 @@ if (token) {
     axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
 }
 
-Vue.use(VueRouter);
+const app = createApp({
+    data() {
+        return {
+            alert: {
+                type: null,
+                autoClose: 0,
+                message: '',
+                confirmationProceed: null,
+                confirmationCancel: null,
+            },
+            autoLoadsNewEntries: localStorage.autoLoadsNewEntries === '1',
+        };
+    },
+});
 
-Vue.prototype.$http = axios.create();
+app.config.globalProperties.$http = axios.create();
 
 window.Horizon.basePath = '/' + window.Horizon.path;
 
@@ -29,31 +42,17 @@ if (window.Horizon.path === '' || window.Horizon.path === '/') {
     window.Horizon.basePath = '';
 }
 
-const router = new VueRouter({
+const router = createRouter({
+    history: createWebHistory(routerBasePath),
     routes: Routes,
-    mode: 'history',
-    base: routerBasePath,
 });
 
-Vue.component('vue-json-pretty', VueJsonPretty);
-Vue.component('alert', Alert);
-Vue.component('scheme-toggler', SchemeToggler);
+app.use(router);
 
-Vue.mixin(Base);
+app.component('vue-json-pretty', VueJsonPretty);
+app.component('alert', Alert);
+app.component('scheme-toggler', SchemeToggler);
 
-new Vue({
-    router,
-    data() {
-        return {
-            alert: {
-                type: null,
-                autoClose: 0,
-                message: '',
-                confirmationProceed: null,
-                confirmationCancel: null,
-            },
+app.mixin(Base);
 
-            autoLoadsNewEntries: localStorage.autoLoadsNewEntries === '1',
-        };
-    },
-}).$mount('#horizon');
+app.mount('#horizon');

resources/js/routes.js

@@ -24,99 +24,100 @@ export default [
 
     {
         path: '/monitoring',
-        name: 'monitoring',
-        component: monitoring,
-    },
-
-    {
-        path: '/monitoring/:tag',
-        component: monitoringTag,
         children: [
             {
-                path: 'jobs',
-                name: 'monitoring-jobs',
-                component: monitoringTagJobs,
-                props: { type: 'jobs' },
+                path: '',
+                name: 'monitoring',
+                component: monitoring,
             },
             {
-                path: 'failed',
-                name: 'monitoring-failed',
-                component: monitoringTagJobs,
-                props: { type: 'failed' },
+                path: ':tag',
+                component: monitoringTag,
+                children: [
+                    {
+                        path: 'jobs',
+                        name: 'monitoring-jobs',
+                        component: monitoringTagJobs,
+                        props: { type: 'jobs' },
+                    },
+                    {
+                        path: 'failed',
+                        name: 'monitoring-failed',
+                        component: monitoringTagJobs,
+                        props: { type: 'failed' },
+                    },
+                ],
             },
         ],
     },
 
-    { path: '/metrics', redirect: '/metrics/jobs' },
-
     {
-        path: '/metrics/',
-        component: metrics,
+        path: '/metrics',
+        redirect: '/metrics/jobs',
         children: [
             {
                 path: 'jobs',
-                name: 'metrics-jobs',
-                component: metricsJobs,
+                component: metrics,
+                children: [{ path: '', name: 'metrics-jobs', component: metricsJobs }],
             },
             {
                 path: 'queues',
-                name: 'metrics-queues',
-                component: metricsQueues,
+                component: metrics,
+                children: [{ path: '', name: 'metrics-queues', component: metricsQueues }],
+            },
+            {
+                path: ':type/:slug',
+                name: 'metrics-preview',
+                component: metricsPreview,
             },
         ],
     },
 
-    {
-        path: '/metrics/:type/:slug',
-        name: 'metrics-preview',
-        component: metricsPreview,
-    },
-
     {
         path: '/jobs/:type',
-        name: 'jobs',
-        component: recentJobs,
-    },
-
-    {
-        path: '/jobs/pending/:jobId',
-        name: 'pending-jobs-preview',
-        component: recentJobsJob,
-    },
-
-    {
-        path: '/jobs/completed/:jobId',
-        name: 'completed-jobs-preview',
-        component: recentJobsJob,
-    },
-
-    {
-        path: '/jobs/silenced/:jobId',
-        name: 'silenced-jobs-preview',
-        component: recentJobsJob,
+        children: [
+            {
+                path: '',
+                name: 'jobs',
+                component: recentJobs,
+            },
+            {
+                path: ':jobId',
+                name: 'job-preview',
+                component: recentJobsJob,
+            },
+        ],
     },
 
     {
         path: '/failed',
-        name: 'failed-jobs',
-        component: failedJobs,
-    },
-
-    {
-        path: '/failed/:jobId',
-        name: 'failed-jobs-preview',
-        component: failedJobsJob,
+        children: [
+            {
+                path: '',
+                name: 'failed-jobs',
+                component: failedJobs,
+            },
+            {
+                path: ':jobId',
+                name: 'failed-jobs-preview',
+                component: failedJobsJob,
+            },
+        ],
     },
 
     {
         path: '/batches',
-        name: 'batches',
-        component: batches,
-    },
-
-    {
-        path: '/batches/:batchId',
-        name: 'batches-preview',
-        component: batchesPreview,
+        children: [
+            {
+                path: '',
+                name: 'batches',
+                component: batches,
+            },
+            {
+                path: ':batchId',
+                name: 'batches-preview',
+                component: batchesPreview,
+            },
+        ],
     },
 ];

resources/js/screens/batches/index.vue

@@ -26,9 +26,9 @@
         },
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 

resources/js/screens/batches/preview.vue

@@ -28,9 +28,9 @@
 
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 

resources/js/screens/dashboard.vue

@@ -29,9 +29,9 @@
 
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearTimeout(this.timeout);
         },
 

resources/js/screens/failedJobs/index.vue

@@ -30,9 +30,9 @@
         },
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 

resources/js/screens/failedJobs/job.vue

@@ -34,9 +34,9 @@
 
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 

resources/js/screens/monitoring/index.vue

@@ -25,16 +25,12 @@
             this.loadTags();
 
             this.refreshTagsPeriodically();
-
-            this.$on('addTagModalClosed', data => {
-                this.addTagModalOpened = false;
-            });
         },
 
         /**
-         * Clean up after the component is destroyed.
+         * Clean up after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 

resources/js/screens/monitoring/job-row.vue

@@ -1,7 +1,7 @@
 <template>
     <tr>
         <td>
-            <router-link :title="job.name" :to="{ name: $parent.type != 'failed' ? 'completed-jobs-preview' : 'failed-jobs-preview', params: { jobId: job.id }}">
+            <router-link :title="job.name" :to="{ name: 'job-preview', params: { jobId: job.id, type: $parent.type }}">
                 {{ jobBaseName(job.name) }}
             </router-link>
 

resources/js/screens/monitoring/tag-jobs.vue

@@ -40,9 +40,9 @@
 
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 
@@ -176,8 +176,8 @@
                 </td>
             </tr>
 
-            <tr v-for="job in jobs" :key="job.id" :job="job" is="job-row">
-            </tr>
+            <component v-for="job in jobs" :key="job.id" :job="job" is="job-row">
+            </component>
             </tbody>
         </table>
 

resources/js/screens/recentJobs/index.vue

@@ -36,9 +36,9 @@
         },
 
         /**
-         * Clean after the component is destroyed.
+         * Clean after the component is unmounted.
          */
-        destroyed() {
+        unmounted() {
             clearInterval(this.interval);
         },
 
@@ -191,8 +191,8 @@
                         </td>
                     </tr>
 
-                    <tr v-for="job in jobs" :key="job.id" :job="job" is="job-row">
-                    </tr>
+                    <component v-for="job in jobs" :key="job.id" :job="job" is="job-row">
+                    </component>
                 </tbody>
             </table>