From b245aa4a39b486aa78f666fac1957ce783b3a62c Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Tue, 28 Jul 2026 17:22:50 +0200
Subject: [PATCH] feat: update the page title using a watcher

Added a watcher (watchEffect) to App.vue to update the page title
always when a dependency changes. The afterEach hook was removed from
the router.
---
 src/App.vue         |  8 +++++++-
 src/router/index.js | 11 +++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 932a816..67a933a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,8 +18,12 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
+import { updatePageTitle } from './router';
 import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
-import { ref, provide, watch } from 'vue';
+import { ref, provide, watch, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
 const colorScheme = ref(getColorScheme());
@@ -42,6 +46,8 @@ watch(colorScheme, (newValue) => {
         document.body.classList.remove('color-scheme-auto');
     }
 });
+
+watchEffect(() => updatePageTitle(route));
 </script>
 
 <template>
diff --git a/src/router/index.js b/src/router/index.js
index e3caa49..f81b523 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -59,18 +59,17 @@ const router = createRouter({
     routes
 });
 
-// set page title
-router.afterEach(to => {
+export const updatePageTitle = function updatePageTitle (route) {
     const title =
-        typeof to.meta.title === 'function'
-        ? to.meta.title(to)
-        : to.meta.title;
+        typeof route.meta.title === 'function'
+        ? route.meta.title(route)
+        : route.meta.title;
 
     if (title) {
         document.title = `${title} - Seekra`;
     } else {
         document.title = 'Seekra';
     };
-});
+};
 
 export default router;
\ No newline at end of file