Added dynamic title based on route

trenz-gmbh · Aug 11, 2022 · dd25950 · dd25950
1 parent d8ce12c
commit dd25950
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1,4 @@
 VUE_APP_API_BASE=https://localhost:7262/api/
 VUE_APP_PRIMARY_COLOR='#8af'
-VUE_APP_PRIMARY_FOREGROUND_COLOR='#000'
+VUE_APP_PRIMARY_FOREGROUND_COLOR='#000'
+VUE_APP_NAME='My Wiki'
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -29,14 +29,26 @@ const routes: Array<RouteRecordRaw> = [
     path: '/:path(.*)*',
     component: NotFoundView,
     meta: {
-      title: '',
+      title: 'Not Found',
     }
   }
 ]
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
+  routes,
 })
 
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title + ' \u2022 ' + process.env.VUE_APP_NAME;
+  } else if (to.params.location) {
+    document.title = (to.params.location as string).split('/').pop() + ' \u2022 ' + process.env.VUE_APP_NAME;
+  } else {
+    document.title = process.env.VUE_APP_NAME;
+  }
+
+  next()
+});
+
 export default router