feat: add i18n for app metadata

Author: cwandev

src/App.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { useRouteCacheStore } from '@/stores'
 
+const { t } = useI18n()
+
 useHead({
-  title: 'Vue3 Vant Mobile',
+  title: () => t('app.name'),
   meta: [
     {
       name: 'description',
-      content: 'An mobile web apps template based on the Vue 3 ecosystem',
+      content: () => t('app.description'),
     },
     {
       name: 'theme-color',
-      content: () => isDark.value ? '#00aba9' : '#ffffff',
+      content: () => isDark.value ? '#0B0A0A' : '#ffffff',
     },
   ],
   link: [

src/constants/index.ts

@@ -1,2 +1,4 @@
-export const appName = 'vue3-vant-mobile'
-export const appDescription = 'An mobile web apps template based on the Vue 3 ecosystem'
+import { i18n } from '@/utils/i18n'
+
+export const appName = () => i18n.global.t('app.name')
+export const appDescription = () => i18n.global.t('app.description')

src/locales/en-US.json

@@ -1,4 +1,9 @@
 {
+  "app": {
+    "name": "Vue3 Vant Mobile",
+    "description": "An mobile web apps template based on the Vue 3 ecosystem"
+  },
+
   "navbar": {
     "Home": "Home",
     "Profile": "Profile",

src/locales/zh-CN.json

@@ -1,4 +1,9 @@
 {
+  "app": {
+    "name": "Vue3 移动端模板",
+    "description": "一个基于 Vue 3 生态系统的移动 web 应用模板"
+  },
+
   "navbar": {
     "Home": "主页",
     "Profile": "我的",

src/router/index.ts

@@ -31,7 +31,7 @@ router.beforeEach(async (to: EnhancedRouteLocation) => {
   routeCacheStore.addRoute(to)
 
   // Set page title
-  setPageTitle(to.meta.title)
+  setPageTitle(to.name)
 
   if (isLogin() && !userStore.userInfo?.uid)
     await userStore.info()

src/utils/set-page-title.ts

@@ -1,5 +1,6 @@
 import { appName } from '@/constants'
+import { i18n } from '@/utils/i18n'
 
-export default function setPageTitle(title?: string): void {
-  window.document.title = title ? `${title} - ${appName}` : appName
+export default function setPageTitle(name?: string): void {
+  window.document.title = name ? `${i18n.global.t(`navbar.${name}`)} - ${appName()}` : appName()
 }