在 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"
/>

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

我已经按照 this example 安装了 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，使用 combined inject 可能更好。

在 nuxt 插件中使用 i18n

Using i18n in nuxt plugin

plugins

translation

vue.js

nuxt.js

vuetify.js