chore(webui): Migrate to Quasar 2.x and Vue.js 3.x

webui/src/router/index.js

@@ -1,26 +1,18 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
+import { route } from 'quasar/wrappers'
+import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 
-Vue.use(VueRouter)
+export default route(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
 
-/*
- * If not building with SSR mode, you can
- * directly export the Router instantiation
- */
-
-export default function (/* { store, ssrContext } */) {
-  const Router = new VueRouter({
-    scrollBehavior: () => ({ x: 0, y: 0 }),
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
     routes,
 
-    // Leave these as is and change from quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
-    mode: process.env.VUE_ROUTER_MODE,
-    base: process.env.VUE_ROUTER_BASE
+    history: createHistory(process.env.MODE === 'ssr' ? undefined : process.env.VUE_ROUTER_BASE)
   })
 
   return Router
-}
+})

webui/src/router/routes.js

@@ -1,3 +1,5 @@
+import Error404 from 'pages/_commons/Error404.vue'
+
 const LayoutDefault = () => import('layouts/Default.vue')
 
 const routes = [
@@ -249,8 +251,8 @@ const routes = [
 // Always leave this as last one
 if (process.env.MODE !== 'ssr') {
   routes.push({
-    path: '*',
-    component: () => import('pages/_commons/Error404.vue'),
+    path: '/:catchAll(.*)*',
+    component: Error404,
     meta: {
       title: '404'
     }