Use nuxt-i18n file

[snakemastr]

I have a nuxt project with nuxt-validate and nuxt-i18n. Nuxt-i18n is configured to use a separate .json file with a custom langDir. When I try to use nuxt-validate, the locale switches correctly but the messages are not used from my translation file. I have used the standard root node "validations" and hoped it would be a plug and play solution but it's not..

['nuxt-validate', {
      rules: ['required'],
      nuxti18n: true
}],
['nuxt-i18n', {
      locales: [
        {
          name: 'Nederlands',
          code: 'nl',
          iso: 'nl-NL',
          file: 'nl.json'
        }
      ],
      langDir: 'i18n/',
      defaultLocale: 'nl',
      lazy: true,
      strategy: 'prefix_except_default'
    }],

I have also tried the vee-validate 3 fork from mole-inc but to no avail.

Any help would be much appreciated.

[hieubq90]

I have a nuxt project with nuxt-validate and nuxt-i18n. Nuxt-i18n is configured to use a separate .json file with a custom langDir. When I try to use nuxt-validate, the locale switches correctly but the messages are not used from my translation file. I have used the standard root node "validations" and hoped it would be a plug and play solution but it's not..

['nuxt-validate', {
      rules: ['required'],
      nuxti18n: true
}],
['nuxt-i18n', {
      locales: [
        {
          name: 'Nederlands',
          code: 'nl',
          iso: 'nl-NL',
          file: 'nl.json'
        }
      ],
      langDir: 'i18n/',
      defaultLocale: 'nl',
      lazy: true,
      strategy: 'prefix_except_default'
    }],

I have also tried the vee-validate 3 fork from mole-inc but to no avail.

Any help would be much appreciated.

This config & plugin worked good with both en, vi locale nuxt.config.js

[
      '@mole-inc/nuxt-validate',
      {
        // lang: 'vi',
        nuxti18n: {
          locale: {
            vi: 'vi',
            en: 'en',
          },
        },
      },
    ],

~/plugins/validate.js

import { extend, configure, localize } from 'vee-validate'
// import { required, email, min } from 'vee-validate/dist/rules'
import en from 'vee-validate/dist/locale/en.json'
import ar from 'vee-validate/dist/locale/ar.json'

// Install English and Arabic locales.
localize({
  en,
  ar,
})

export default function ({ app }) {
  configure({
    // this will be used to generate messages.
    defaultMessage: (field, values) => {
      values._field_ = app.i18n.t(`fields.${field}`)
      return app.i18n.t(`validations.${values._rule_}`, values)
    },
  })

  extend('minmax', {
    validate(value, { min, max }) {
      return value.length >= min && value.length <= max
    },
    params: ['min', 'max'],
    message: (fieldName, placeholders) => {
      return `The ${fieldName} field must have at least ${placeholders.min} characters and ${placeholders.max} characters at most`
    },
  })
}