在nuxt插件中使用i18n

Question

我将 nuxt 与 vuetify 结合使用，并在单个文件中定义了所有验证规则（用于文本输入），如下所示：

// @/plugins/form_validations.js

export default Object.freeze({
  VALIDATIONS: {

    FIRSTNAME: [
      v => !!v || 'Firstname is required',
      v => (v && v.length >= 3) || 'Firstname must be at least 3 characters'
    ],

    // ...
})

我在我的组件中使用它们，如下所示：

import FormValidations from '@/plugins/form_validations.js'

export default {
  data() {
   firstnameRules: FormValidations.VALIDATIONS.FIRSTNAME
  }
}

<v-text-field
   v-model="firstname"
   :rules="firstnameRules"
/>

我现在想根据语言环境翻译此规则的文本。

我已经按照这个示例安装了i18n，并且可以在我的组件中很好地使用它，例如像这样：

<v-text-field
   ref="firstname"
   v-model="firstname"
   :label="$t('firstname')"
   :rules="firstnameRules"
    required />

但是，我无法直接在我将所有规则分组的文件中使用翻译插件。我已经看到，使用 nuxt，您可以访问插件中的上下文，如下所示：

export default ({ app, store }) => {
}

但是我无法使用 Object.freeze 以这种格式定义常量。

我也尝试过这个：

import i18n from '@/plugins/i18n.js'

export default Object.freeze({
  VALIDATIONS: {
    FIRSTNAME: [
      v => !!v || i18n.t('firstname_required'),
    ],
}

但是我收到一个错误，函数t未定义。如何访问我的规则中的翻译插件？

Answer 1

我面临着几乎相同的问题，这是我的解决方案：

// @/plugins/validation-rules.js

export default ({app}) => {

  let i18n = app.i18n

  // You can use `this.$rules` anywhere in the Nuxt app.
  Vue.prototype.$rules = {
    required: [v => !!v || i18n.t('required')]
  }
}

<v-text-field
      v-model="email"
      :rules="this.$rules.required"
      label="E-mail"
      required
      ref="emailField"
></v-text-field>

当我在语言切换器中更改语言时，错误消息不会以您切换的语言显示，您必须在输入字段中重新输入错误的电子邮件，但错误消息会以正确的语言显示。

我也不确定

Vue.prototype

，使用组合注射可能会更好。

Answer 2

2023 年更新：Nuxt 3、Vee-Validate 4.x、Nuxti18n 8.0.rc-5 版本：

import { configure, defineRule } from 'vee-validate'
import { localize } from '@vee-validate/i18n';
import * as AllRules from '@vee-validate/rules';


import en from '@vee-validate/i18n/dist/locale/en.json';
import ru from '@vee-validate/i18n/dist/locale/ru.json';


export default defineNuxtPlugin(nuxtApp => {
  const $t = nuxtApp.$i18n.t;
  Object.entries(AllRules).forEach(([id, validator]) => {
    defineRule(id, validator);
  });

  defineRule('ip', value => {
    if (!/((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g.test(value)) {
      return $t('errors.ip_invalid');
    }
    return true;
  });

  configure({
    generateMessage: localize({
      en,
      ru,
    }),
  });

})