From 0e28438740bcdda923fe7a08dca33daf566ecfc4 Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sun, 17 Nov 2024 22:21:56 -0500
Subject: [PATCH] Watch route and set page title.

---
 src/App.vue         | 11 ++++++++++-
 src/router/index.ts | 21 +++++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2207ca3..475c3cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import OverlayBadge from 'primevue/overlaybadge';
+
+const route = useRoute();
+const page_title = ref();
+
+watch(() => route.meta, (newVal, oldVal) => {
+  page_title.value = newVal.title;
+})
 </script>
 
 <template>
@@ -75,7 +84,7 @@ import OverlayBadge from 'primevue/overlaybadge';
           >
             <i class="pi pi-bars text-4xl" />
           </a>
-          <span class="title">Page Title</span>
+          <span class="title">{{ page_title }}</span>
         </div>
         <a
           v-styleclass="{
diff --git a/src/router/index.ts b/src/router/index.ts
index 1b84c35..449af98 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,19 +7,28 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
       component: HomeView,
+      meta: {
+        title: 'Home',
+      },
+      name: 'home',
+      path: '/',
     },
     {
-      path: '/about',
-      name: 'about',
       component: AboutView,
+      meta: {
+        title: 'About',
+      },
+      name: 'about',
+      path: '/about',
     },
     {
-      path: '/sticker',
-      name: 'sticker',
       component: StickerView,
+      meta: {
+        title: 'Sticker',
+      },
+      name: 'sticker',
+      path: '/sticker',
     },
   ],
 })