feat: upgrade to Nuxt v4

Author: cwandev

app/components/AppHeader.vue

@@ -16,7 +16,7 @@ const { t } = useI18n()
 const title = computed(() => {
   if (!route.meta)
     return ''
-  return route.meta.i18n ? t(route.meta.i18n) : (route.meta.title || '')
+  return route.meta.i18n_key ? t(route.meta.i18n_key) : (route.meta.title || '')
 })
 
 const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route.name))
@@ -26,7 +26,7 @@ const showLeftArrow = computed(() => route.name && routeWhiteList.includes(route
   <VanNavBar
     :title="title"
     :left-arrow="!showLeftArrow"
-    placeholder clickable fixed
+    clickable placeholder fixed
     @click-left="onBack"
   />
 </template>

app/pages/counter/index.vue

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

app/pages/index.vue

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

app/pages/keepalive/index.vue

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

app/pages/profile/index.vue

@@ -2,7 +2,7 @@
 definePageMeta({
   layout: 'default',
   title: '我的',
-  i18n: 'menu.profile',
+  i18n_key: 'menu.profile',
 })
 </script>
 

app/pages/prose/index.vue

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

app/pages/unocss/index.vue

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

app/types/vue-router.d.ts

@@ -3,7 +3,7 @@ declare module 'vue-router' {
     /** page title */
     title?: string
     /** i18n key */
-    i18n?: string
+    i18n_key?: string
   }
 }
 

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: {
@@ -130,9 +124,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",