Using i18n in nuxt plugin

Question

I am using nuxt with vuetify and I defined all my validations rules (for text inputs) in a single file like this:

// @/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'
    ],

    // ...
})

I use them in my components like this:

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

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

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

I want now to translate the text of this rules depending of the locale.

I have installed i18n following this example and can use it well in my components, for example like this:

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

However, I'm not able to use the translation plugin directly in my file where I grouped all the rules. I have seen that with nuxt you can access the context in plugins as follow:

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

But I'm not able to define my constants using Object.freeze in that format.

I tried also this:

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

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

But I got an error that function t is not defined. How can I access the translation plugin in my rules?

Josephinajosephine

Answer 1

I was facing almost identical problem, here is my solution:

// @/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>

When I change the language in my language switcher, the error message doesn't get shown in your switched language, you must re-type the erroneous email into the input field, but then the error message shows in correct language.

I'm also not sure about the Vue.prototype, it might be better to use combined inject.

Clover

Answer 2

2023 update: Nuxt 3, Vee-Validate 4.x, Nuxti18n 8.0.rc-5 version:

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,
    }),
  });

})

Note: i18n module should be installed and enabled in your nuxt.config.ts:

  modules: [
    '@nuxtjs/i18n',
    '@pinia/nuxt',
  ],

Foreplay

When I try this I get the error Cannot read properties of undefined (reading 't') – Selfabnegation

Added a note about required i18n module for Nuxt. – Foreplay