Watch route and set page title.

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="{

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',
     },
   ],
 })