Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/router/index.ts

@@ -1,9 +1,6 @@
-import Vue from "vue";
-import Router, { Route } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import VueScrollTo from "vue-scrollto";
-import { PositionResult } from "vue-router/types/router.d";
-import { ImportedComponent } from "vue/types/options";
-import Home from "../views/Home.vue";
+import HomeView from "../views/HomeView.vue";
 import { eventRoutes } from "./event";
 import { actorRoutes } from "./actor";
 import { errorRoutes } from "./error";
@@ -15,25 +12,21 @@ import { userRoutes } from "./user";
 import RouteName from "./name";
 import { AVAILABLE_LANGUAGES, i18n } from "@/utils/i18n";
 
-Vue.use(Router);
+const { t } = i18n.global;
 
-function scrollBehavior(
-  to: Route,
-  from: Route,
-  savedPosition: any
-): PositionResult | undefined | null {
+function scrollBehavior(to: any, from: any, savedPosition: any) {
   if (to.hash) {
     VueScrollTo.scrollTo(to.hash, 700);
     return {
       selector: to.hash,
-      offset: { x: 0, y: 10 },
+      offset: { left: 0, top: 10 },
     };
   }
   if (savedPosition) {
     return savedPosition;
   }
 
-  return { x: 0, y: 0 };
+  return { left: 0, top: 0 };
 }
 
 export const routes = [
@@ -47,84 +40,83 @@ export const routes = [
   {
     path: "/search",
     name: RouteName.SEARCH,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
+    component: (): Promise<any> => import("@/views/SearchView.vue"),
     props: true,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Search") as string },
+      announcer: { message: (): string => t("Search") as string },
     },
   },
   {
     path: "/",
     name: RouteName.HOME,
-    component: Home,
+    component: HomeView,
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Homepage") as string },
+      announcer: { message: (): string => t("Homepage") as string },
+    },
+  },
+  {
+    path: "/categories",
+    name: RouteName.CATEGORIES,
+    component: (): Promise<any> => import("@/views/CategoriesView.vue"),
+    meta: {
+      requiredAuth: false,
+      announcer: { message: (): string => t("Categories") as string },
     },
   },
   {
     path: "/about",
     name: RouteName.ABOUT,
-    component: (): Promise<ImportedComponent> =>
-      import(/* webpackChunkName: "about" */ "@/views/About.vue"),
+    component: (): Promise<any> => import("@/views/About.vue"),
     meta: { requiredAuth: false },
     redirect: { name: RouteName.ABOUT_INSTANCE },
     children: [
       {
         path: "instance",
         name: RouteName.ABOUT_INSTANCE,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
-          ),
+        component: (): Promise<any> =>
+          import("@/views/About/AboutInstance.vue"),
         meta: {
           announcer: {
-            message: (): string => i18n.t("About instance") as string,
+            message: (): string => t("About instance") as string,
           },
         },
       },
       {
         path: "/terms",
         name: RouteName.TERMS,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
+        component: (): Promise<any> => import("@/views/About/Terms.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Terms") as string },
+          announcer: { message: (): string => t("Terms") as string },
         },
       },
       {
         path: "/privacy",
         name: RouteName.PRIVACY,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"),
+        component: (): Promise<any> => import("@/views/About/Privacy.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Privacy") as string },
+          announcer: { message: (): string => t("Privacy") as string },
         },
       },
       {
         path: "/rules",
         name: RouteName.RULES,
-        component: (): Promise<ImportedComponent> =>
-          import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
+        component: (): Promise<any> => import("@/views/About/Rules.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Rules") as string },
+          announcer: { message: (): string => t("Rules") as string },
         },
       },
       {
         path: "/glossary",
         name: RouteName.GLOSSARY,
-        component: (): Promise<ImportedComponent> =>
-          import(
-            /* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
-          ),
+        component: (): Promise<any> => import("@/views/About/Glossary.vue"),
         meta: {
           requiredAuth: false,
-          announcer: { message: (): string => i18n.t("Glossary") as string },
+          announcer: { message: (): string => t("Glossary") as string },
         },
       },
     ],
@@ -132,38 +124,38 @@ export const routes = [
   {
     path: "/interact",
     name: RouteName.INTERACT,
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(/* webpackChunkName: "interact" */ "@/views/Interact.vue"),
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Interact") as string },
+      announcer: { message: (): string => t("Interact") as string },
     },
   },
   {
     path: "/auth/:provider/callback",
     name: "auth-callback",
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(
         /* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
       ),
     meta: {
       announcer: {
-        message: (): string => i18n.t("Redirecting to Mobilizon") as string,
+        message: (): string => t("Redirecting to Mobilizon") as string,
       },
     },
   },
   {
     path: "/welcome/:step?",
     name: RouteName.WELCOME_SCREEN,
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(
         /* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
       ),
     meta: {
       requiredAuth: true,
-      announcer: { message: (): string => i18n.t("First steps") as string },
+      announcer: { message: (): string => t("First steps") as string },
     },
-    props: (route: Route): Record<string, unknown> => {
+    props: (route: any): Record<string, unknown> => {
       const step = Number.parseInt(route.params.step, 10);
       if (Number.isNaN(step)) {
         return { step: 1 };
@@ -174,13 +166,13 @@ export const routes = [
   {
     path: "/404",
     name: RouteName.PAGE_NOT_FOUND,
-    component: (): Promise<ImportedComponent> =>
+    component: (): Promise<any> =>
       import(
         /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
       ),
     meta: {
       requiredAuth: false,
-      announcer: { message: (): string => i18n.t("Page not found") as string },
+      announcer: { message: (): string => t("Page not found") as string },
     },
   },
 ];
@@ -188,36 +180,31 @@ export const routes = [
 for (const locale of AVAILABLE_LANGUAGES) {
   routes.push({
     path: `/${locale}`,
-    component: (): Promise<ImportedComponent> =>
-      import(
-        /* webpackChunkName: "HomepageRedirectComponent" */ "../components/Utils/HomepageRedirectComponent.vue"
-      ),
+    component: () =>
+      import("../components/Utils/HomepageRedirectComponent.vue"),
   });
 }
 
 routes.push({
-  path: "*",
+  path: "/:pathMatch(.*)*",
   redirect: { name: RouteName.PAGE_NOT_FOUND },
 });
 
-const router = new Router({
+export const router = createRouter({
   scrollBehavior,
-  mode: "history",
-  base: "/",
+  history: createWebHistory("/"),
   routes,
 });
 
 router.beforeEach(authGuardIfNeeded);
-router.afterEach(() => {
-  try {
-    if (router.app.$children[0]) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      router.app.$children[0].error = null;
-    }
-  } catch (e) {
-    console.error(e);
-  }
-});
-
-export default router;
+// router.afterEach(() => {
+//   try {
+//     if (router.app.$children[0]) {
+//       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//       // @ts-ignore
+//       router.app.$children[0].error = null;
+//     }
+//   } catch (e) {
+//     console.error(e);
+//   }
+// });