From 78cd753c77201d6664a0ff44cf9b8a17b2b6f751 Mon Sep 17 00:00:00 2001
From: Saeid Doroudi <doroudi@outlook.com>
Date: Thu, 30 Nov 2023 23:06:15 +0330
Subject: [PATCH] feat: :sparkles: Update title base on page title  #35

set page title using translation and meta description for each view using route meta title property on route change
---
 src/components.d.ts | 10 ----------
 src/main.ts         | 10 +++++++++-
 src/modules/i18n.ts | 14 ++++++++------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index eaaad7b..8bc3ba8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -23,14 +23,9 @@ declare module 'vue' {
     Navbar: typeof import('./components/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NButton: typeof import('naive-ui')['NButton']
-    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
-    NDrawer: typeof import('naive-ui')['NDrawer']
-    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
@@ -38,14 +33,9 @@ declare module 'vue' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
-    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NPopselect: typeof import('naive-ui')['NPopselect']
-    NSpace: typeof import('naive-ui')['NSpace']
-    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
-    NUpload: typeof import('naive-ui')['NUpload']
-    ProductManagement: typeof import('./components/Products/ProductManagement.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/main.ts b/src/main.ts
index 6bd91ea..76a593a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import generatedRoutes from '~pages'
 import '@unocss/reset/tailwind-compat.css'
 import 'uno.css'
 import './styles/main.scss'
+import i18n from './modules/i18n'
 
 const routes = setupLayouts(generatedRoutes)
 
@@ -27,8 +28,15 @@ app.use(router)
 Object.values(import.meta.glob<{ install: AppModule }>('./modules/*.ts', { eager: true }))
   .forEach(i => i.install?.(app, router))
 
+// @ts-expect-error "Type instantiation is excessively deep and possibly infinite.ts(2589)"
+const { t } = i18n.global
+let title = t('title')
+
 router.beforeEach((to, from, next) => {
-  // TODO: implement route guards
+  if (to.meta.title)
+    title = `${to.meta.title} - ${title}`
+
+  document.title = title
   next()
 })
 enableMocking().then(() => app.mount('#app'))
diff --git a/src/modules/i18n.ts b/src/modules/i18n.ts
index f7647e9..88b07ca 100644
--- a/src/modules/i18n.ts
+++ b/src/modules/i18n.ts
@@ -10,12 +10,14 @@ const messages = Object.fromEntries(
     }),
 )
 
-export const install: AppModule = (app) => {
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages,
-  })
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages,
+})
 
+export const install: AppModule = (app) => {
   app.use(i18n)
 }
+
+export default i18n