diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 516fa3b..054351b 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -75,6 +75,7 @@ module.exports = {
     },
   },
   globals: {
+    $t: true,
     uni: true,
     UniApp: true,
     wx: true,
diff --git a/package.json b/package.json
index b506642..2f50f8d 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "pinia": "2.0.36",
     "pinia-plugin-persistedstate": "3.2.1",
     "vue": "3.2.47",
-    "vue-i18n": "9.8.0"
+    "vue-i18n": "9.9.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 100a064..bfd8d76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,8 +59,8 @@ dependencies:
     specifier: 3.2.47
     version: 3.2.47
   vue-i18n:
-    specifier: 9.8.0
-    version: 9.8.0(vue@3.2.47)
+    specifier: 9.9.0
+    version: 9.9.0(vue@3.2.47)
 
 devDependencies:
   '@commitlint/cli':
@@ -2731,12 +2731,12 @@ packages:
       '@intlify/shared': 9.1.9
       '@intlify/vue-devtools': 9.1.9
 
-  /@intlify/core-base@9.8.0:
-    resolution: {integrity: sha512-UxaSZVZ1DwqC/CltUZrWZNaWNhfmKtfyV4BJSt/Zt4Or/fZs1iFj0B+OekYk1+MRHfIOe3+x00uXGQI4PbO/9g==}
+  /@intlify/core-base@9.9.0:
+    resolution: {integrity: sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/message-compiler': 9.8.0
-      '@intlify/shared': 9.8.0
+      '@intlify/message-compiler': 9.9.0
+      '@intlify/shared': 9.9.0
     dev: false
 
   /@intlify/devtools-if@9.1.9:
@@ -2753,11 +2753,11 @@ packages:
       '@intlify/shared': 9.1.9
       source-map: 0.6.1
 
-  /@intlify/message-compiler@9.8.0:
-    resolution: {integrity: sha512-McnYWhcoYmDJvssVu6QGR0shqlkJuL1HHdi5lK7fNqvQqRYaQ4lSLjYmZxwc8tRNMdIe9/KUKfyPxU9M6yCtNQ==}
+  /@intlify/message-compiler@9.9.0:
+    resolution: {integrity: sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==}
     engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.8.0
+      '@intlify/shared': 9.9.0
       source-map-js: 1.0.2
     dev: false
 
@@ -2777,8 +2777,8 @@ packages:
     resolution: {integrity: sha512-xKGM1d0EAxdDFCWedcYXOm6V5Pfw/TMudd6/qCdEb4tv0hk9EKeg7lwQF1azE0dP2phvx0yXxrt7UQK+IZjNdw==}
     engines: {node: '>= 10'}
 
-  /@intlify/shared@9.8.0:
-    resolution: {integrity: sha512-TmgR0RCLjzrSo+W3wT0ALf9851iFMlVI9EYNGeWvZFUQTAJx0bvfsMlPdgVtV1tDNRiAfhkFsMKu6jtUY1ZLKQ==}
+  /@intlify/shared@9.9.0:
+    resolution: {integrity: sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==}
     engines: {node: '>= 16'}
     dev: false
 
@@ -12123,14 +12123,14 @@ packages:
       - vue
     dev: true
 
-  /vue-i18n@9.8.0(vue@3.2.47):
-    resolution: {integrity: sha512-Izho+6PYjejsTq2mzjcRdBZ5VLRQoSuuexvR8029h5CpN03FYqiqBrShMyf2I1DKkN6kw/xmujcbvC+4QybpsQ==}
+  /vue-i18n@9.9.0(vue@3.2.47):
+    resolution: {integrity: sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==}
     engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.8.0
-      '@intlify/shared': 9.8.0
+      '@intlify/core-base': 9.9.0
+      '@intlify/shared': 9.9.0
       '@vue/devtools-api': 6.5.1
       vue: 3.2.47
     dev: false
diff --git a/src/locale/en.json b/src/locale/en.json
new file mode 100644
index 0000000..9eaddd2
--- /dev/null
+++ b/src/locale/en.json
@@ -0,0 +1,3 @@
+{
+  "app.name": "En Title"
+}
diff --git a/src/locale/index.ts b/src/locale/index.ts
new file mode 100644
index 0000000..0a85193
--- /dev/null
+++ b/src/locale/index.ts
@@ -0,0 +1,17 @@
+import { createI18n } from 'vue-i18n'
+
+import en from './en.json'
+import zh from './zh.json'
+
+const messages = {
+  en,
+  zh,
+}
+console.log(uni.getLocale())
+
+const i18n = createI18n({
+  locale: 'zh',
+  messages,
+})
+
+export default i18n
diff --git a/src/locale/zh.json b/src/locale/zh.json
new file mode 100644
index 0000000..b1ba111
--- /dev/null
+++ b/src/locale/zh.json
@@ -0,0 +1,3 @@
+{
+  "app.name": "中文标题"
+}
diff --git a/src/main.ts b/src/main.ts
index 30d9b00..51f3a4a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,13 @@
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import store from './store'
+import i18n from './locale/index'
 import 'virtual:svg-icons-register'
 import 'virtual:uno.css'
 
 export function createApp() {
   const app = createSSRApp(App)
-  app.use(store)
+  app.use(store).use(i18n)
   return {
     app,
   }
diff --git a/src/pages/index/i18n.vue b/src/pages/index/i18n.vue
new file mode 100644
index 0000000..3009474
--- /dev/null
+++ b/src/pages/index/i18n.vue
@@ -0,0 +1,9 @@
+<template>{{ $t('app.name') }}</template>
+
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "%app.name%"
+  }
+}
+</route>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 12cc03d..004264d 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -2,8 +2,8 @@
 <route lang="json5" type="home">
 {
   style: {
-    navigationStyle: 'custom',
-    navigationBarTitleText: '首页',
+    // "navigationStyle": "custom",
+    navigationBarTitleText: '%app.name%',
   },
 }
 </route>
@@ -15,6 +15,7 @@
     <view class="mt-12">
       <image src="/static/logo.svg" alt="" class="w-40 h-40 block mx-auto" />
     </view>
+    <view>{{ $t('app.name') }}</view>
     <view class="text-center text-4xl main-title-color mt-8">unibest</view>
     <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
     <view class="text-justify max-w-100 m-auto">