Vuetify+Nuxt项目中切换i18n语言时如何同步修改Vuetify组件语言？

问题根因 #

• 直接赋值app.vuetify.lang.current不符合Vuetify的响应式更新规则，不会触发组件重新渲染
• 语言包引入路径错误、插件加载顺序不对也会导致配置不生效
• 服务端渲染阶段vuetify实例未完全初始化，直接赋值容易触发undefined报错

修复步骤 #

1. 修正nuxt.config配置 #

首先调整Vuetify语言包的引入路径，避免引入源码文件导致打包异常，同时确认插件注册顺序在i18n配置之后：

// nuxt.config.js（Nuxt2 搭配 @nuxtjs/vuetify 场景）
import en from 'vuetify/lib/locale/en'
import de from 'vuetify/lib/locale/de'

export default {
  // 其他配置省略
  vuetify: {
    treeShake: true,
    customVariables: ['~/assets/styles/setting/_variables.scss'],
    lang: {
      locales: {
        de,
        en
      },
      current: 'de'
    }
  },
  plugins: [
    '~/plugins/i18n.js'
  ]
}

如果仍然出现服务端报错，可以将插件重命名为i18n.client.js，仅在客户端侧执行语言切换逻辑

2. 重写i18n插件逻辑 #

不要直接修改lang.current属性，调用Vuetify内置的setCurrent方法触发响应式更新：

// plugins/i18n.js
export default function({ app }) {
  app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
    // 校验目标语言是否已在Vuetify语言包列表中注册
    if (app.vuetify.lang.locales[newLocale]) {
      // 调用官方方法更新语言，自动触发所有Vuetify组件重渲染
      app.vuetify.lang.setCurrent(newLocale)
    }
  }
}

3. 可选兼容异常场景 #

如果部分页面切换后仍然不生效，可以在业务侧的语言切换方法中补充强制更新逻辑：

// 业务代码中切换语言的方法
async switchLang(targetLang) {
  await this.$i18n.setLocale(targetLang)
  // 手动触发Vuetify语言更新
  this.$vuetify.lang.setCurrent(targetLang)
  this.$nextTick(() => window.scrollTo(0, 0))
}

Nuxt3 + Vuetify3 适配方案 #

如果是Nuxt3搭配Vuetify3的场景，适配逻辑更简单：

// plugins/i18n.ts
export default defineNuxtPlugin((nuxtApp) => {
  const { locale } = useI18n()
  const vuetify = useVuetify()

  watch(locale, (newLang) => {
    if (vuetify.locale.availableLocales.includes(newLang)) {
      vuetify.locale.current.value = newLang
    }
  }, { immediate: true })
})

内容的提问来源于stack exchange，提问作者morteza mortezaie