how do i integrate vee-validate v.2 with nuxt-i18n?

Question

i am using vee-validate v.2 and i want to localize error massages . i have wrote a plugin like this

    import {configure} from 'vee-validate'
export default function ({app}){
    configure({
        defaultMessage:(field,values)=>{
            values._field_=app.i18n.t(`fields.${field}`)
            return app.i18n.t(`validation.${values._rule_}`,values)
        }
    })
}

and this is loacales/en.js

  validation: {
    required: "{_field_} can not be empty",
    min: "{_field_} may not be Less than {length} characters",
    confirmed: "{_field_} do not matches",
    email: "{_field_} is not valid"
  },
  fields: {
    email: 'Email',
    password: 'Password',
    userName: 'Username',
    
  },
  
}

and Also this is $i18n in nuxt config

 i18n: {
    seo: false,
    locales: [
      { code: 'en', iso: 'en-US', file: 'en.js' },
      { code: 'de', iso: 'de-GER', file: 'de.js' }
    ],
    lazy: true,
    langDir: 'locales/',
    baseUrl: process.env.BASE_URL,
    defaultLocale: 'de'
  },

BUT it doesnt work , and pages dont shows and i get error like this How can do i fixed it ?

score 3 · Answer 1 · answered Sep 03 '21 at 23:15

Let me explain my solution step by step :

Step 1) Install the required packages:

npm install nuxt-i18n --save
npm install vee-validate --save

package.json
{
 "@nuxtjs/i18n": "^7.0.1",
 "vee-validate": "^3.4.12"
}

Step 2) Create a folder named /locales to the root of your project.

Step 3) Create a file /locales/en.js for English

import en from 'vee-validate/dist/locale/en'

export default async (context, locale) => {
  return {
    validation: en.messages,
    email : "email",
  };
}

Step 4) Create a file /locales/tr.js for Second Language (Türkçe)

import en from 'vee-validate/dist/locale/tr'

export default async (context, locale) => {
  return {
    validation: tr.messages,
    email : "e-posta",
  };
}

Step 5) Create a i18n plugin file /plugins/i18n.js

import {configure } from "vee-validate";

export default function ({app}) {
    configure({
    defaultMessage: (field, values) => {
      return app.i18n.t(`validation.${values._rule_}`, values);
    }
  });
}

Step 6) Create a validation plugin file /plugins/validate.js

import Vue from 'vue'

import { ValidationProvider, ValidationObserver, extend} from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

Vue.component('appValidationProvider', ValidationProvider);
Vue.component("appValidationObserver", ValidationObserver);

extend("required", required);
extend("email", email);

Note: I used 'required' and 'email' rule in this example if you want to use more rules you can visit the guide page and add to this file.

All rule list : https://vee-validate.logaretm.com/v2/guide/rules.html

Step 7) nuxt.config -> plugin Configuration

  plugins: [
    '~/plugins/i18n.js',
    '~/plugins/validate.js',
  ],

Step 8) nuxt.config -> i18n module Configuration

    modules: [
    ['nuxt-i18n', {
      baseUrl: 'https://yourdomain.com',
      lazy: true,
      loadLanguagesAsync: true,
      locales: [
        {
          name: 'English',
          code: 'en',
          iso: 'en-US',
          file: 'en.js'
        },
        {
          name: 'Türkçe',
          code: 'tr',
          iso: 'tr-TR',
          file: 'tr.js'
        },
      ],
      langDir: 'locales/',
      defaultLocale: 'en',
      vueI18n: {
         fallbackLocale: 'en'
      },
      strategy: 'prefix_and_default',
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        alwaysRedirect: false,
        fallbackLocale: 'en',
        redirectOn: 'root'
      },
      parsePages: false,
      pages: {
        'contact/index': {
          tr: '/iletisim',
          en: '/contact'
        }
      }
    }]
  ],

Step 9) nuxt.config -> vee-validate configuration add this :

build: {
    transpile: ['vee-validate/dist/rules',
                'vee-validate/dist/locale/tr',
                'vee-validate/dist/locale/en']
  },

Usage -> page : contact/index.vue

<template>
 <app-validation-observer v-slot="{ handleSubmit }">
   <form class="form" @submit.prevent="handleSubmit(onSubmit)">

      <app-validation-provider rules="required|email" v-slot="{ errors }">
          <input type="text" :name="$t('email')" v-model="formData.email">
          <span class="is-invalid">{{ errors[0]}}</span>
          <button>Test</button>
      </app-validation-provider>

    </form>
 </app-validation-observer>
</template>
<script>
export default {
    name: "contact",
    data() {
      return {
        formData: {
          email: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('form posted :)');
      }
    }
  }
</script>
<style scoped>
  .is-invalid {
    color: red;
  }
</style>

thnx , i did what did you say but i have an error like this: This dependency was not found: * vee-validate/dist/rules in ./plugins/validate.js --- i have to say i use vee validate v2 and i cant use v3 . — morteza mortezaie, Sep 04 '21 at 07:35
another error is : "export 'configure' was not found in 'vee-validate' — morteza mortezaie, Sep 04 '21 at 07:36
I think it doesn't work because of version mismatch. Why do you have to use v2? — Çağlar Duman, Sep 04 '21 at 10:16

score 0 · Answer 2 · answered Feb 15 '22 at 12:29

in the file vee-validate.js

import configure method

import {
   configure
} from 'vee-validate/dist/vee-validate.full.esm'

then use it like

export default ({ app: { i18n } }) => {

  configure({
    defaultMessage: (field, values) => {
      return i18n.t(`validation.${values._rule_}`, values);
    }
  });
})

and in i18n translations folder add for every language

import en from 'vee-validate/dist/locale/en'

export default {
    validation: en.messages,
}

are you sure that it works for version 2 ?? – morteza mortezaie Feb 19 '22 at 11:31 — morteza mortezaie, Feb 19 '22 at 11:31

how do i integrate vee-validate v.2 with nuxt-i18n?

2 Answers2