Add localized page titles from route metadata

src/App.vue

@@ -3,11 +3,20 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
-import { RouterView } from 'vue-router';
+import { onMounted, onUnmounted, watchEffect } from 'vue';
+import { RouterView, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { useDataStore } from './stores/data';
 import { useTimeStore } from './stores/time.mjs';
 
+const route = useRoute();
+const { t } = useI18n();
+
+watchEffect(() => {
+  const title = route.meta.titleKey ? t(route.meta.titleKey) : route.meta.title;
+  document.title = title ? `${title} — Splatoon3.ink` : 'Splatoon3.ink';
+});
+
 const time = useTimeStore();
 onMounted(() => time.startUpdatingNow());
 onUnmounted(() => time.stopUpdatingNow());

src/router/routes.mjs

@@ -5,36 +5,43 @@ export function createRoutes(views = {}) {
       path: '/',
       name: 'home',
       component: views.HomeView,
+      meta: { titleKey: 'schedule.title' },
     },
     {
       path: '/salmonrun',
       name: 'salmonrun',
       component: views.SalmonRunView,
+      meta: { titleKey: 'salmonrun.title' },
     },
     {
       path: '/gear',
       name: 'gear',
       component: views.GearView,
+      meta: { titleKey: 'gear.title' },
     },
     {
       path: '/splatfests',
       name: 'splatfests',
       component: views.SplatfestsView,
+      meta: { titleKey: 'festival.title' },
     },
     {
       path: '/challenges',
       name: 'challenges',
       component: views.ChallengesView,
+      meta: { titleKey: 'events.title' },
     },
     {
       path: '/socials',
       name: 'socials',
       component: views.SocialsView,
+      meta: { titleKey: 'footer.socials' },
     },
     {
       path: '/about',
       name: 'about',
       component: views.AboutView,
+      meta: { titleKey: 'footer.about' },
     },
     {
       path: '/faq',
@@ -44,6 +51,7 @@ export function createRoutes(views = {}) {
       path: '/:pathMatch(.*)*',
       name: 'not-found',
       component: views.NotFoundView,
+      meta: { title: '404' },
     },
   ];
 }

src/views/NotFoundView.vue

@@ -35,21 +35,6 @@
   </main>
 </template>
 
-<script setup>
-import { onMounted, onUnmounted } from 'vue';
-
-let previousTitle;
-
-onMounted(() => {
-  previousTitle = document.title;
-  document.title = '404 — Splatoon3.ink';
-});
-
-onUnmounted(() => {
-  document.title = previousTitle;
-});
-</script>
-
 <style scoped>
 .not-found {
   display: grid;