如何在Nuxt（v3或Bridge）中结合@nuxtjs/i18n使用vuelidate i18n？

一、Nuxt 3 环境配置步骤 #

• 先安装必需依赖：npm install @vuelidate/core @vuelidate/validators @nuxtjs/i18n
• 在 nuxt.config.ts 中配置 i18n 模块及多语言消息：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'zh',
    vueI18n: {
      legacy: false,
      locale: 'zh',
      messages: {
        en: {
          validation: {
            required: 'This field is required',
            minLength: 'Minimum length is {min}'
          }
        },
        zh: {
          validation: {
            required: '此字段为必填项',
            minLength: '最小长度为 {min}'
          }
        }
      }
    }
  }
})

• 创建 Vuelidate 全局配置插件 plugins/vuelidate.ts，绑定 i18n 翻译：

import { useI18n } from 'vue-i18n'
import { setValidationMessages } from '@vuelidate/validators'

export default defineNuxtPlugin(() => {
  const { t } = useI18n()
  setValidationMessages({
    required: () => t('validation.required'),
    minLength: ({ min }) => t('validation.minLength', { min })
    // 按需添加其他验证规则的翻译映射
  })
})

二、Nuxt Bridge 环境适配 #

Bridge 环境下核心逻辑一致，仅 i18n 实例获取方式略有不同：

• 插件中通过 useNuxtApp() 获取 i18n 的 $t 方法：

import { useNuxtApp } from '#app'
import { setValidationMessages } from '@vuelidate/validators'

export default defineNuxtPlugin(() => {
  const { $t } = useNuxtApp()
  setValidationMessages({
    required: () => $t('validation.required'),
    minLength: ({ min }) => $t('validation.minLength', { min })
  })
})

• 确保 nuxt.config.js 中 i18n 配置开启 legacy: false，适配 Composition API。

三、组件外获取 i18n 实例 #

在工具函数、Store 等非组件场景，通过 useNuxtApp() 直接获取 i18n 实例：

// utils/validation-helper.ts
import { useNuxtApp } from '#app'

export const getValidationMsg = (ruleKey: string, params?: Record<string, any>) => {
  const { $t } = useNuxtApp()
  return $t(`validation.${ruleKey}`, params)
}

Nuxt 3 服务端场景（如 Nitro 插件、Server 路由）也可直接使用 useI18n()，只要处于 Composition API 上下文内。

四、关键注意事项 #

• 必须使用 @vuelidate/core@^2.0.0 及以上版本，确保支持 Composition API 模式
• i18n 配置必须开启 legacy: false，避免与 Vuelidate 的 Composition 用法冲突
• 自定义验证规则时，可直接在规则函数内调用 t/$t 实现多语言提示

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