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

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>