Page title

.eslintrc.js

@@ -85,6 +85,7 @@ module.exports = {
 
         '@typescript-eslint/no-unsafe-assignment': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
         '@typescript-eslint/no-floating-promises': 'off',
 
         // allow debugger during development only

src/boot/i18n.ts

@@ -3,12 +3,14 @@ import { createI18n } from 'vue-i18n';
 
 import messages from 'src/i18n';
 
-export default boot(({ app }) => {
-    const i18n = createI18n({
-        locale: 'en',
-        messages,
-    });
+const i18n = createI18n({
+    locale: 'en',
+    messages,
+});
 
+export default boot(({ app }) => {
     // Set i18n instance on app
     app.use(i18n);
 });
+
+export { i18n };

src/i18n/en/index.ts

@@ -1,15 +1,15 @@
 export default {
-    'globals': {
-        'lang': {
+    globals: {
+        lang: {
             'es': 'Spanish',
             'en': 'English'
         }
     },
-    'errors': {
+    errors: {
         'statusUnauthorized': 'Access denied',
         'statusInternalServerError': 'An internal server error has ocurred'
     },
-    'login': {
+    login: {
         'title': 'Login',
         'username': 'Username',
         'password': 'Password',
@@ -18,12 +18,18 @@ export default {
         'loginSuccess': 'You have successfully logged in',
         'loginError': 'Invalid username or password'
     },
-    'customer': {},
-    'components': {
+    customer: {},
+    components: {
         'topbar': {},
         'userPanel': {
             'settings': 'Settings',
             'logOut': 'Log Out'
         }
+    },
+    pages: {
+        'logIn': 'Log In',
+        'dashboard': 'Dashboard',
+        'customers': 'Customers',
+        'list': 'List',
     }
 };

src/router/index.ts

@@ -6,6 +6,7 @@ import {
     createWebHistory,
 } from 'vue-router';
 import routes from './routes';
+import { i18n } from 'src/boot/i18n';
 import { useSession } from 'src/composables/useSession';
 const session = useSession();
 /*
@@ -47,5 +48,34 @@ export default route(function (/* { store, ssrContext } */) {
         }
     });
 
+    Router.afterEach((to) => {
+        interface Meta {
+            title?: string;
+        }
+
+        const { t } = i18n.global;
+        let title = '';
+
+
+        const parent = to.matched[1];
+        if (parent) {
+            const parentMeta: Meta = parent.meta;
+            if (parentMeta && parentMeta.title) {
+                title += t(`pages.${parentMeta.title}`);
+            }
+        }
+        //const childTitle: string = childMeta.title;
+
+        const childMeta: Meta = to.meta;
+        if (childMeta && childMeta.title) {
+            if (title != '') title += ' - ';
+
+            title += t(`pages.${childMeta.title}`);
+        }
+
+        document.title = title;
+    });
+
+
     return Router;
 });

src/router/routes.ts

@@ -4,6 +4,7 @@ const routes: RouteRecordRaw[] = [
     {
         path: '/login',
         name: 'Login',
+        meta: { title: 'logIn' },
         component: () => import('../pages/Login/Login.vue'),
     },
     {
@@ -15,17 +16,20 @@ const routes: RouteRecordRaw[] = [
             {
                 path: '/dashboard',
                 name: 'Dashboard',
+                meta: { title: 'dashboard' },
                 component: () => import('../pages/Dashboard/Dashboard.vue'),
             },
             {
                 path: '/customer',
                 name: 'Customer',
+                meta: { title: 'customers' },
                 component: () => import('../pages/Customer/Customer.vue'),
                 redirect: { name: 'List' },
                 children: [
                     {
                         path: 'list',
                         name: 'List',
+                        meta: { title: 'list' },
                         component: () => import('../pages/Customer/List.vue'),
                     },
                     {