fix(head): apply page head before router enter

src/router.ts

@@ -1,19 +1,41 @@
-import { AVAILABLE_LOCALES, DEFAULT_LOCALE } from '@/i18n'
 import { createRouter, createWebHistory } from 'vue-router'
+import { getHead } from './utilities'
 import { AVAILABLE_LOCALES, DEFAULT_LOCALE } from './constants'
 import i18n from './i18n'
+
 const BASE_PATH = i18n.global.locale.value !== DEFAULT_LOCALE ? i18n.global.locale.value : '/'
+const PAGES_WITH_HEADERS = ['home', 'damage-calculator', 'magic-calculator', 'creatures-library']
 
 const router = createRouter({
   history: createWebHistory(BASE_PATH),
   routes: [
     {
       path: '/',
       children: [
-        { path: '', component: () => import('@/views/HomePage.vue') },
-        { path: 'damage', component: () => import('@/views/DamageCalculatorPage.vue') },
-        { path: 'magic', component: () => import('@/views/MagicCalculatorPage.vue') },
-        { path: 'creatures', component: () => import('@/views/CreaturesLibraryPage.vue') },
+        {
+          path: '',
+          name: 'home',
+          props: true,
+          component: () => import('@/views/HomePage.vue'),
+        },
+        {
+          path: 'damage',
+          name: 'damage-calculator',
+          props: true,
+          component: () => import('@/views/DamageCalculatorPage.vue'),
+        },
+        {
+          path: 'magic',
+          name: 'magic-calculator',
+          props: true,
+          component: () => import('@/views/MagicCalculatorPage.vue'),
+        },
+        {
+          path: 'creatures',
+          props: true,
+          name: 'creatures-library',
+          component: () => import('@/views/CreaturesLibraryPage.vue'),
+        },
         { path: 'send-error', component: () => import('@/views/SendErrorPage.vue') },
         {
           path: `:locale(${AVAILABLE_LOCALES.join('|')})/:path(.*)`,
@@ -40,6 +62,14 @@ const router = createRouter({
   },
 })
 
+router.beforeEach(async (to, _from, next) => {
+  const page = to.name?.toString()
+  if (!page || !PAGES_WITH_HEADERS.includes(page)) return next()
+  const json = await import(`./locales/head/pages/${page}/${i18n.global.locale.value}.json`)
+  to.params.head = JSON.stringify(getHead(json.default))
+  next()
+})
+
 router.resolve({
   name: 'not-found',
   params: { pathMatch: ['not', 'found'] },

src/views/CreaturesLibraryPage.vue

@@ -60,7 +60,6 @@
 import ObjectPortrait from '@/components/ObjectPortrait.vue'
 import type { Creature } from '@/models/Creature'
 import { useStore } from '@/store'
-import { getHead, metaEmptyProperties, selectedLocale } from '@/utilities'
 import { useHead } from '@unhead/vue'
 import { useDebounce } from '@vueuse/core'
 import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue'
@@ -69,11 +68,9 @@ import { useRoute, useRouter } from 'vue-router'
 const CreatureCard = defineAsyncComponent(() => import('@/components/creaturesLibrary/CreatureCard.vue'))
 const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
 
-const head = useHead(metaEmptyProperties)
-import(`../locales/head/pages/creatures-library-page/${selectedLocale.value}.json`).then((json) => {
-  const data = json.default
-  head?.patch(getHead(data))
-})
+const props = defineProps<{ head: string }>()
+useHead(JSON.parse(props.head))
+
 const store = useStore()
 const router = useRouter()
 const route = useRoute()
@@ -106,11 +103,11 @@ watch(debouncedSearch, (searchValue) => {
   if (!searchValue.length) return
 
   const searchQuery = searchValue.trim().toLowerCase()
-    const foundCreature = creatures.value.find((creature: Creature) => {
+  const foundCreature = creatures.value.find((creature: Creature) => {
     return creature.name.toLowerCase().includes(searchQuery)
-    })
+  })
 
-    if (foundCreature) {
+  if (foundCreature) {
     router.replace({ hash: `#${foundCreature.name.replaceAll(' ', '')}` })
   }
 })

src/views/DamageCalculatorPage.vue

@@ -42,17 +42,14 @@ import { Battle } from '@/models/Battle'
 import { useHead } from '@unhead/vue'
 import { watchIgnorable } from '@vueuse/shared'
 import type { Ref } from 'vue'
-import { getHead, metaEmptyProperties, selectedLocale } from '@/utilities'
 import { computed, defineAsyncComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
 const HowToUse = defineAsyncComponent(() => import('@/components/HowToUse.vue'))
 
-const head = useHead(metaEmptyProperties)
-import(`../locales/head/pages/damage-calculator-page/${selectedLocale.value}.json`).then((json) => {
-  const data = json.default
-  head?.patch(getHead(data))
-})
+const props = defineProps<{ head: string }>()
+useHead(JSON.parse(props.head))
+
 const { t } = useI18n()
 
 const calculators = ref<Array<Battle>>([new Battle()]) as Ref<Array<Battle>>

src/views/HomePage.vue

@@ -27,19 +27,16 @@
 </template>
 
 <script setup lang="ts">
-import { getHead, metaEmptyProperties, selectedLocale } from '@/utilities'
 import { useHead } from '@unhead/vue'
 import { defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 const ObjectPortrait = defineAsyncComponent(() => import('@/components/ObjectPortrait.vue'))
 const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
 
-const head = useHead(metaEmptyProperties)
-import(`../locales/head/pages/home-page/${selectedLocale.value}.json`).then((json) => {
-  const data = json.default
-  head?.patch({ ...getHead(data), titleTemplate: '' })
-})
+const props = defineProps<{ head: string }>()
+useHead(JSON.parse(props.head))
+
 const { t } = useI18n()
 const router = useRouter()
 

src/views/MagicCalculatorPage.vue

@@ -39,14 +39,11 @@ import { defineAsyncComponent, ref, type Ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import MagicCalculator from '../components/MagicCalculator.vue'
 import { useHead } from '@unhead/vue'
-import { getHead, metaEmptyProperties, selectedLocale } from '@/utilities'
 const PageFooter = defineAsyncComponent(() => import('@/components/PageFooter.vue'))
 
-const head = useHead(metaEmptyProperties)
-import(`../locales/head/pages/magic-calculator-page/${selectedLocale.value}.json`).then((json) => {
-  const data = json.default
-  head?.patch(getHead(data))
-})
+const props = defineProps<{ head: string }>()
+useHead(JSON.parse(props.head))
+
 const { t } = useI18n()
 
 const calculators = ref<Array<Battle>>([new Battle()]) as Ref<Array<Battle>>