feat: implement dynamic page titles using unhead and i18n

Author: kieranwv

src/App.vue

@@ -1,3 +1,17 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+
+const title = computed(() => {
+  return t('app.title')
+})
+
+useHead({
+  titleTemplate: (_t) => {
+    return _t && _t !== title.value ? `${_t} - ${title.value}` : title.value
+  },
+})
+</script>
+
 <template>
   <RouterView />
 </template>

src/modules/unhead.ts

@@ -0,0 +1,5 @@
+import { createHead } from '@unhead/vue'
+
+export const head = createHead()
+
+export default head

src/modules/vue-router.ts

@@ -16,15 +16,7 @@ router.beforeEach(() => {
   NProgress.start()
 })
 
-router.afterEach((to) => {
-  const { setLocaleTitle } = useLocale()
-  if (to.meta.locale)
-    setLocaleTitle(to.meta.locale, true)
-  else if (to.meta.title)
-    setLocaleTitle(to.meta.title)
-  else
-    setLocaleTitle()
-
+router.afterEach(() => {
   NProgress.done()
 })
 

src/pages/[...path].vue

@@ -1,16 +1,20 @@
 <route lang="json">
 {
-  "name": "404",
-  "meta": {
-    "title": "Page Not Found",
-    "locale": "page.not-found.title"
-  }
+  "name": "not-found"
 }
 </route>
 
 <script setup lang="ts">
 const { t } = useI18n()
 
+const title = computed(() => {
+  return t('page.not-found.title')
+})
+
+useHead({
+  title,
+})
+
 const router = useRouter()
 
 function goBack() {

src/pages/about.vue

@@ -1,16 +1,22 @@
 <route lang="json">
 {
-  "name": "About",
+  "name": "about",
   "meta": {
-    "title": "About Page",
-    "locale": "page.about.title",
     "layout": "page"
   }
 }
 </route>
 
 <script lang="ts" setup>
 const { t } = useI18n()
+
+const title = computed(() => {
+  return t('page.about.title')
+})
+
+useHead({
+  title,
+})
 </script>
 
 <template>

src/pages/index.vue

@@ -1,9 +1,7 @@
 <route lang="json">
 {
-  "name": "Index",
+  "name": "index",
   "meta": {
-    "title": "Index Page",
-    "locale": "page.index.title",
     "layout": "page"
   }
 }
@@ -14,6 +12,14 @@ import type { TodoList } from '@/types/todo'
 
 const { t } = useI18n()
 
+const title = computed(() => {
+  return t('page.index.title')
+})
+
+useHead({
+  title,
+})
+
 const { headerLogo } = storeToRefs(useLayoutStore())
 
 const { toggleLogo } = useLayoutStore()

typings/auto-imports.d.ts

@@ -45,6 +45,7 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getActiveHead: typeof import('@unhead/vue')['getActiveHead']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
@@ -53,6 +54,7 @@ declare global {
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const injectHead: typeof import('@unhead/vue')['injectHead']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
   const installModules: typeof import('../src/utils/install')['installModules']
   const isDark: typeof import('../src/composables/dark')['isDark']
@@ -203,6 +205,8 @@ declare global {
   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useHead: typeof import('@unhead/vue')['useHead']
+  const useHeadSafe: typeof import('@unhead/vue')['useHeadSafe']
   const useI18n: typeof import('vue-i18n')['useI18n']
   const useId: typeof import('vue')['useId']
   const useIdle: typeof import('@vueuse/core')['useIdle']
@@ -260,6 +264,10 @@ declare global {
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSeoMeta: typeof import('@unhead/vue')['useSeoMeta']
+  const useServerHead: typeof import('@unhead/vue')['useServerHead']
+  const useServerHeadSafe: typeof import('@unhead/vue')['useServerHeadSafe']
+  const useServerSeoMeta: typeof import('@unhead/vue')['useServerSeoMeta']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
@@ -375,6 +383,7 @@ declare module 'vue' {
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getActiveHead: UnwrapRef<typeof import('@unhead/vue')['getActiveHead']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
@@ -383,6 +392,7 @@ declare module 'vue' {
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectHead: UnwrapRef<typeof import('@unhead/vue')['injectHead']>
     readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
     readonly installModules: UnwrapRef<typeof import('../src/utils/install')['installModules']>
     readonly isDark: UnwrapRef<typeof import('../src/composables/dark')['isDark']>
@@ -533,6 +543,8 @@ declare module 'vue' {
     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useHead: UnwrapRef<typeof import('@unhead/vue')['useHead']>
+    readonly useHeadSafe: UnwrapRef<typeof import('@unhead/vue')['useHeadSafe']>
     readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
     readonly useId: UnwrapRef<typeof import('vue')['useId']>
     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
@@ -590,6 +602,10 @@ declare module 'vue' {
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSeoMeta: UnwrapRef<typeof import('@unhead/vue')['useSeoMeta']>
+    readonly useServerHead: UnwrapRef<typeof import('@unhead/vue')['useServerHead']>
+    readonly useServerHeadSafe: UnwrapRef<typeof import('@unhead/vue')['useServerHeadSafe']>
+    readonly useServerSeoMeta: UnwrapRef<typeof import('@unhead/vue')['useServerSeoMeta']>
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>

typings/vue-router.d.ts

@@ -18,8 +18,8 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    'Index': RouteRecordInfo<'Index', '/', Record<never, never>, Record<never, never>>,
-    '404': RouteRecordInfo<'404', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
-    'About': RouteRecordInfo<'About', '/about', Record<never, never>, Record<never, never>>,
+    'index': RouteRecordInfo<'index', '/', Record<never, never>, Record<never, never>>,
+    'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    'about': RouteRecordInfo<'about', '/about', Record<never, never>, Record<never, never>>,
   }
 }

vite.config.ts

@@ -3,6 +3,7 @@
 import { resolve } from 'node:path'
 import { cwd } from 'node:process'
 import VueI18n from '@intlify/unplugin-vue-i18n/vite'
+import { unheadVueComposablesImports } from '@unhead/vue'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import UnoCSS from 'unocss/vite'
@@ -76,6 +77,7 @@ export default defineConfig(({ mode }) => {
         imports: [
           'vue',
           VueRouterAutoImports,
+          unheadVueComposablesImports,
           {
             // add any other imports you were relying on
             'vue-router/auto': ['useLink'],