Show page title

src/locales/en.json

@@ -3,6 +3,9 @@
         "lang": {
             "es": "Spanish",
             "en": "English"
+        },
+        "pages": {
+            "logIn": "Log In"
         }
     },
     "errors": {

src/locales/es.json

@@ -3,6 +3,12 @@
         "lang": {
             "es": "Español",
             "en": "Inglés"
+        },
+        "pages": {
+            "logIn": "Iniciar sesión",
+            "dashboard": "Portada",
+            "customers": "Clientes",
+            "customerList": "Listado de clientes",
         }
     },
     "errors": {

src/router/index.ts

@@ -1,10 +1,12 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import { useSession } from '@/core/composables/useSession';
+import i18n from '@/i18n';
 
 const routes: Array<RouteRecordRaw> = [
     {
         path: '/login',
         name: 'Login',
+        meta: { title: 'logIn' },
         component: () => import('../views/Login/Login.vue'),
     },
     {
@@ -16,17 +18,20 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: '/dashboard',
                 name: 'Dashboard',
+                meta: { title: 'dashboard' },
                 component: () => import('../views/Dashboard/Dashboard.vue'),
             },
             {
                 path: '/customer',
                 name: 'Customer',
+                meta: { title: 'customers' },
                 component: () => import('../views/Customer/Customer.vue'),
                 redirect: { name: 'List' },
                 children: [
                     {
                         path: 'list',
                         name: 'List',
+                        meta: { title: 'customerList' },
                         component: () => import('../views/Customer/List.vue'),
                     },
                     {
@@ -61,4 +66,20 @@ router.beforeEach((to, from, next) => {
     }
 });
 
+router.afterEach((to) => {
+    interface Meta {
+        title?: string;
+    }
+
+    const { t } = i18n.global;
+
+    const childMeta: Meta = to.meta;
+    if (childMeta && childMeta.title) {
+        //const parent = to.matched[1];
+        //const childTitle: string = childMeta.title;
+
+        document.title = t(`globals.pages.${childMeta.title}`);
+    }
+});
+
 export default router;