feat: Support vue i18n (#76)

Author: SublimeCT

.vscode/extensions.json

@@ -1,7 +1,8 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "antfu.unocss",
-    "simonhe.common-intellisense"
-  ]
-}
+{
+  "recommendations": [
+    "Vue.volar",
+    "antfu.unocss",
+    "simonhe.common-intellisense",
+    "lokalise.i18n-ally"
+  ]
+}

.vscode/settings.json

@@ -49,5 +49,13 @@
   "common-intellisense.showSlots": false,
   "common-intellisense.ui": [
     "vant4"
-  ]
+  ],
+
+  // Configuration of i18n i18n-ally
+  "i18n-ally.enabledParsers": ["json"],
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.localesPaths": [
+    "src/locales"
+  ],
+  "i18n-ally.keystyle": "nested"
 }

build/vite/index.ts

@@ -1,3 +1,5 @@
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { unheadVueComposablesImports } from '@unhead/vue'
 import legacy from '@vitejs/plugin-legacy'
 import vue from '@vitejs/plugin-vue'
@@ -12,6 +14,7 @@ import { VitePWA } from 'vite-plugin-pwa'
 import Sitemap from 'vite-plugin-sitemap'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import Layouts from 'vite-plugin-vue-layouts'
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import { createViteVConsole } from './vconsole'
 
 export function createVitePlugins() {
@@ -56,6 +59,8 @@ export function createVitePlugins() {
         VueRouterAutoImports,
         {
           'vue-router/auto': ['useLink'],
+          '@/utils/i18n': ['i18n', 'locale'],
+          'vue-i18n': ['useI18n'],
         },
         unheadVueComposablesImports,
       ],
@@ -65,6 +70,12 @@ export function createVitePlugins() {
       ],
     }),
 
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+    VueI18nPlugin({
+      // locale messages resource pre-compile option
+      include: resolve(dirname(fileURLToPath(import.meta.url)), '../../src/locales/**'),
+    }),
+
     legacy({
       targets: ['defaults', 'not IE 11'],
     }),

package.json

@@ -32,10 +32,12 @@
     "vant": "^4.8.5",
     "vconsole": "^3.15.1",
     "vue": "^3.4.21",
+    "vue-i18n": "^9.10.2",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.8.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.25",
     "@types/nprogress": "^0.2.3",

pnpm-lock.yaml

@@ -46,6 +46,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
+  const i18n: typeof import('@/utils/i18n')['i18n']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectHead: typeof import('@unhead/vue')['injectHead']
@@ -57,6 +58,7 @@ declare global {
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const it: typeof import('vitest')['it']
+  const locale: typeof import('@/utils/i18n')['locale']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -193,6 +195,7 @@ declare global {
   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 useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']

src/auto-imports.d.ts

@@ -16,8 +16,12 @@ declare module 'vue' {
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
     VanEmpty: typeof import('vant/es')['Empty']
+    VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPicker: typeof import('vant/es')['Picker']
+    VanPopup: typeof import('vant/es')['Popup']
+    VanRadio: typeof import('vant/es')['Radio']
     VanSpace: typeof import('vant/es')['Space']
     VanSwitch: typeof import('vant/es')['Switch']
   }

src/components.d.ts

@@ -9,9 +9,12 @@ function onBack() {
     router.replace('/')
 }
 
+const { t } = useI18n()
+
 const title = computed(() => {
-  const { title } = (route.meta as { title?: string }) || {}
-  return title || ''
+  if (!route.meta || !route.meta.title)
+    return ''
+  return route.meta.i18n ? t(route.meta.i18n) : route.meta.title
 })
 </script>
 

src/components/NavBar.vue

@@ -0,0 +1,17 @@
+{
+  "home": {
+    "darkMode": "🌗 Dark Mode",
+    "mockGuide": "💿 Mock Guide",
+    "language": "📚 Language",
+    "404Demo": "🙅 Page 404 Demo",
+    "echartsDemo": "📊 Echarts Demo",
+    "persistPiniaState": "🍍 Persistent Pinia state",
+    "unocssExample": "🎨 Unocss example"
+  },
+  "mock": {
+    "fromAsyncData": "Data from asynchronous requests",
+    "noData": "No data",
+    "pull": "Pull",
+    "reset": "Reset"
+  }
+}

src/locales/en-US.json

@@ -0,0 +1,17 @@
+{
+  "home": {
+    "darkMode": "🌗 暗黑模式",
+    "mockGuide": "💿 Mock 指南",
+    "language": "📚 语言",
+    "echartsDemo": "📊 Echarts 演示",
+    "persistPiniaState": "🍍 持久化 Pinia 状态",
+    "404Demo": "🙅 404页 演示",
+    "unocssExample": "🎨 Unocss 示例"
+  },
+  "mock": {
+    "fromAsyncData": "来自异步请求的数据",
+    "pull": "请求",
+    "reset": "清空",
+    "noData": "暂无数据"
+  }
+}