feat: upgrade to Nuxt v4

app/components/AppHeader.vue

@@ -13,20 +13,38 @@ function onBack() {
 
 const { t } = useI18n()
 
+/**
+ * Get page title
+ * Located in i18n/locales/json
+ */
 const title = computed(() => {
-  if (!route.meta)
-    return ''
-  return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
+  if (route.name) {
+    return t(`navbar.${route.name}`)
+  }
+
+  return t('navbar.Undefined')
 })
 
-const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
+/**
+ * Display the left arrow
+ * If route name is in route white list, display left arrow
+ */
+const showLeftArrow = computed(() => {
+  if (route.name && routeWhiteList.includes(route.name)) {
+    return true
+  }
+
+  return false
+})
 </script>
 
 <template>
-  <VanNavBar
+  <van-nav-bar
     :title="title"
+    clickable
+    placeholder
+    fixed
     :left-arrow="!showLeftArrow"
-    placeholder clickable fixed
     @click-left="onBack"
   />
 </template>

app/config/index.ts

@@ -3,4 +3,4 @@ import type { RouteRecordName } from 'vue-router'
 /**
  * Use the AppFooter routing whitelist
  */
-export const useAppFooterRouteNames: RouteRecordName[] = ['index', 'profile']
+export const useAppFooterRouteNames: RouteRecordName[] = ['Home', 'Profile']

app/pages/counter/index.vue

@@ -2,8 +2,7 @@
 import useCounter from '~/composables/counter'
 
 definePageMeta({
-  title: '🍍 持久化 Pinia 状态',
-  i18n: 'menu.persistPiniaState',
+  name: 'Counter',
 })
 
 const counter = useCounter()

app/pages/index.vue

@@ -6,8 +6,7 @@ import { Locale } from 'vant'
 
 definePageMeta({
   layout: 'default',
-  title: '主页',
-  i18n: 'menu.home',
+  name: 'Home',
 })
 
 const color = useColorMode()

app/pages/keepalive/index.vue

@@ -6,8 +6,6 @@ defineOptions({
 definePageMeta({
   name: 'Keepalive',
   keepalive: true,
-  title: '🧡 KeepAlive',
-  i18n: 'menu.keepAlive',
 })
 
 const value = ref(1)

app/pages/profile/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: 'default',
-  title: '我的',
-  i18n: 'menu.profile',
+  name: 'Profile',
 })
 </script>
 

app/pages/prose/index.vue

@@ -3,8 +3,7 @@ import { useProseStore } from '~/stores/prose'
 
 definePageMeta({
   layout: 'default',
-  title: '随笔',
-  i18n: 'menu.fetch',
+  name: 'Prose',
 })
 
 const proseStore = useProseStore()

app/pages/unocss/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 definePageMeta({
-  title: '🎨 Unocss 示例',
-  i18n: 'menu.unocssExample',
+  name: 'Unocss',
 })
 </script>
 

app/types/vue-router.d.ts

@@ -2,8 +2,6 @@ declare module 'vue-router' {
   interface RouteMeta {
     /** page title */
     title?: string
-    /** i18n key */
-    i18n?: string
   }
 }
 

i18n/locales/en-US.json

@@ -1,7 +1,20 @@
 {
-  "menu": {
+  "navbar": {
+    "Home": "Home",
+    "Counter": "Persist Pinia State",
+    "Profile": "Profile",
+    "Prose": "Network Request",
+    "Unocss": "Unocss Example",
+    "Keepalive": "KeepAlive Demo",
+    "Undefined": "Undefined title"
+  },
+
+  "tabbar": {
     "home": "Home",
-    "profile": "Profile",
+    "profile": "Profile"
+  },
+
+  "menu": {
     "darkMode": "🌗 Dark Mode",
     "language": "📚 Language",
     "404Demo": "🙅 Page 404 Demo",
@@ -10,30 +23,32 @@
     "persistPiniaState": "💾 Persist Pinia State",
     "fetch": "🏄 Network Request"
   },
-  "tabbar": {
-    "home": "Home",
-    "profile": "Profile"
-  },
+
   "unocss_page": {
     "hello": "Hello {0}",
     "desc": "This is a simple example of Unocss in action.",
     "btn_txt": "Button"
   },
+
   "error_page": {
     "back_btn": "Back",
     "txt": "Not found"
   },
+
   "profile_page": {
     "txt": "WIP"
   },
+
   "keepalive_page": {
     "label": "The current component will be cached"
   },
+
   "counter_page": {
     "label": "This is a simple example of persisting Pinia state. To verify its effectiveness, you can refresh the interface and observe it.",
     "label_num": "Number",
     "btn_add": "Add"
   },
+
   "prose_page": {
     "btn_fetch": "Fetch",
     "btn_clear": "Clear",

i18n/locales/zh-CN.json

@@ -1,7 +1,20 @@
 {
-  "menu": {
+  "navbar": {
+    "Home": "主页",
+    "Counter": "持久化 Pinia 状态",
+    "Profile": "我的",
+    "Prose": "网络请求",
+    "Unocss": "Unocss 示例",
+    "Keepalive": "KeepAlive 演示",
+    "Undefined": "未定义标题"
+  },
+
+  "tabbar": {
     "home": "主页",
-    "profile": "我的",
+    "profile": "我的"
+  },
+
+  "menu": {
     "darkMode": "🌗 暗黑模式",
     "language": "📚 语言",
     "404Demo": "🙅 404页 演示",
@@ -10,30 +23,32 @@
     "persistPiniaState": "💾 持久化 Pinia 状态",
     "fetch": "🏄 网络请求"
   },
-  "tabbar": {
-    "home": "主页",
-    "profile": "我的"
-  },
+
   "unocss_page": {
     "hello": "你好 {0}",
     "desc": "这是 unocss 一个简单例子。",
     "btn_txt": "按钮"
   },
+
   "error_page": {
     "back_btn": "返回",
     "txt": "没有找到"
   },
+
   "profile_page": {
     "txt": "未完成"
   },
+
   "keepalive_page": {
     "label": "当前组件将会被缓存"
   },
+
   "counter_page": {
     "label": "这是一个简单的持久化 Pinia 状态的例子。为了验证其有效性，你可以刷新界面并观察它。",
     "label_num": "数字",
     "btn_add": "增加"
   },
+
   "prose_page": {
     "btn_fetch": "拉取",
     "btn_clear": "清空",

nuxt.config.ts

@@ -60,7 +60,6 @@ export default defineNuxtConfig({
 
   i18n: {
     locales: currentLocales,
-    lazy: true,
     strategy: 'no_prefix',
     detectBrowserLanguage: {
       useCookie: true,
@@ -69,11 +68,6 @@ export default defineNuxtConfig({
     defaultLocale: 'zh-CN',
     // Reletive to the i18n directory
     vueI18n: './i18n.config.ts',
-
-    bundle: {
-      // https://github.com/nuxt-modules/i18n/issues/3238#issuecomment-2672492536
-      optimizeTranslationDirective: false,
-    },
   },
 
   app: {
@@ -103,6 +97,8 @@ export default defineNuxtConfig({
       include: [
         '@intlify/core-base',
         '@intlify/shared',
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
       ],
     },
   },
@@ -130,9 +126,5 @@ export default defineNuxtConfig({
     },
   },
 
-  future: {
-    compatibilityVersion: 4,
-  },
-
-  compatibilityDate: '2024-09-24',
+  compatibilityDate: '2025-07-18',
 })

package.json

@@ -2,7 +2,7 @@
   "name": "nuxt-vant-mobile",
   "type": "module",
   "version": "0.5.0",
-  "packageManager": "pnpm@10.12.4",
+  "packageManager": "pnpm@10.13.1",
   "engines": {
     "node": ">=20.19.0"
   },
@@ -20,37 +20,37 @@
   },
   "dependencies": {
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/i18n": "^9.5.6",
-    "nuxt": "^3.17.6",
+    "@nuxtjs/i18n": "^10.0.0",
+    "nuxt": "^4.0.0",
     "pinia-plugin-persistedstate": "^4.4.1",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.16.2",
+    "@antfu/eslint-config": "^4.17.0",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@iconify-json/carbon": "^1.2.10",
-    "@nuxt/eslint": "^1.5.2",
+    "@nuxt/eslint": "^1.6.0",
     "@pinia/nuxt": "^0.11.1",
     "@unocss/eslint-plugin": "66.3.3",
     "@unocss/nuxt": "66.3.3",
     "@vant/nuxt": "^1.0.7",
     "bumpp": "^10.2.0",
-    "eslint": "^9.30.1",
+    "eslint": "^9.31.0",
     "eslint-plugin-format": "^1.0.1",
     "lint-staged": "^16.1.2",
     "pinia": "^3.0.3",
     "postcss-mobile-forever": "^5.0.0",
     "simple-git-hooks": "^2.13.0",
     "typescript": "~5.8.3",
-    "vant": "^4.9.20",
-    "vue-tsc": "^3.0.1"
+    "vant": "^4.9.21",
+    "vue-tsc": "^3.0.2"
   },
   "pnpm": {
     "peerDependencyRules": {
       "allowedVersions": {
-        "vue-tsc": "3.0.1"
+        "vue-tsc": "3.0.2"
       }
     },
     "allowedDeprecatedVersions": {
@@ -72,7 +72,7 @@
     ]
   },
   "resolutions": {
-    "vite": "^7.0.3"
+    "vite": "^7.0.5"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",