Nuxt3搭配vee-validate4.7时this.$t可能未定义的国际化问题

问题场景 #

以下配置代码在Nuxt3项目中使用时，报错 This.$t (Object is possibly 'undefined')，需求是实现校验提示的多语言切换，且不想依赖vee-validate自带的i18n方案：

import {
  Field,
  Form as CustomForm,
  useForm,
  defineRule,
  configure,
} from 'vee-validate'
import { required, email, min, numeric } from '@vee-validate/rules'
defineRule('required', required)
defineRule('email', email)
defineRule('min', min)
defineRule('numeric', numeric)

configure({
  generateMessage: ({ rule }) => {
    return this.$t('validate.' + rule?.name)
  },
})

export { Field, CustomForm, useForm }

解决思路与实现步骤 #

1. 改用Nuxt3的组合式API获取国际化实例 #

在Nuxt3中，this 无法在模块/工具文件中直接访问，需要通过Nuxt插件的上下文获取useI18n实例，再配置vee-validate：

创建 plugins/vee-validate.ts 文件：

import { defineNuxtPlugin } from '#app'
import { Field, Form as CustomForm, useForm, defineRule, configure } from 'vee-validate'
import { required, email, min, numeric } from '@vee-validate/rules'
import { useI18n } from 'vue-i18n'

export default defineNuxtPlugin((nuxtApp) => {
  // 注册校验规则
  defineRule('required', required)
  defineRule('email', email)
  defineRule('min', min)
  defineRule('numeric', numeric)

  // 获取i18n实例
  const { t } = useI18n(nuxtApp.vueApp)

  configure({
    generateMessage: ({ rule, values }) => {
      // 拼接翻译键，支持带参数的规则（如min）
      const translateKey = `validate.${rule?.name}`
      // 传入规则参数，让i18n自动替换占位符
      return t(translateKey, values)
    },
  })

  // 注册全局组件，避免重复导入
  nuxtApp.vueApp.component('VField', Field)
  nuxtApp.vueApp.component('VForm', CustomForm)

  // 导出useForm供组件使用
  return {
    provide: {
      useForm
    }
  }
})

2. 配置自定义多语言翻译文件 #

在项目根目录创建 locales 文件夹，添加对应语言的翻译文件：

locales/zh-CN.json：

{
  "validate": {
    "required": "此字段为必填项",
    "email": "请输入有效的邮箱地址",
    "min": "此字段长度不能少于{min}位",
    "numeric": "请输入数字"
  }
}

locales/en-US.json：

{
  "validate": {
    "required": "This field is required",
    "email": "Please enter a valid email address",
    "min": "This field must be at least {min} characters",
    "numeric": "Please enter a number"
  }
}

在 nuxt.config.ts 中配置i18n模块：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      { code: 'zh', name: '中文', file: 'zh-CN.json' },
      { code: 'en', name: 'English', file: 'en-US.json' }
    ],
    defaultLocale: 'zh',
    langDir: 'locales/'
  }
})

3. 组件内使用示例 #

在Vue组件中直接使用注册好的表单组件和校验方法：

<template>
  <VForm v-slot="{ errors }" @submit="handleSubmit">
    <VField name="email" type="email" rules="required|email" placeholder="邮箱" />
    <span class="error" v-if="errors.email">{{ errors.email }}</span>

    <VField name="password" type="password" rules="required|min:6" placeholder="密码" />
    <span class="error" v-if="errors.password">{{ errors.password }}</span>

    <button type="submit">提交</button>
  </VForm>
</template>

<script setup>
const { handleSubmit } = useForm()
const submit = handleSubmit((values) => {
  console.log('表单数据:', values)
})
</script>

<style scoped>
.error {
  color: red;
  font-size: 0.875rem;
}
</style>

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