add title from route

Author: patates-cipsi418

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vuetify 3</title>
     <!-- FONTS -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/router/index.ts

@@ -1,10 +1,12 @@
 // Composables
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import Home from "@/views/Home.vue";
 import CV from "@/views/CV.vue";
 import Social from "@/views/Social.vue";
+import { profile } from "@/models/profile";
+import Vue from "vue";
 
-export const routes = [
+export const routes: RouteRecordRaw[] = [
   {
     path: "/",
     name: "Accueil",
@@ -16,6 +18,9 @@ export const routes = [
     path: "/CV",
     name: "CV",
     component: CV,
+    meta: {
+      title: `CV ${profile.name}`,
+    },
   },
   {
     path: "/Social",
@@ -29,4 +34,11 @@ const router = createRouter({
   routes,
 });
 
+router.afterEach((to, from) => {
+  // Use next tick to handle router history correctly
+  // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
+  document.title =
+    (to.meta.title as string) || to.name?.toString() || profile.name;
+});
+
 export default router;