@vee-validate/i18n

Localization module for vee-validate

What's this

VeeValidate v4 breaks up the parts that made it a popular solution for form validation into it isolated parts. The core vee-validate package no longer includes logic for localization.

This is where this package comes in.

Installation

yarn add @vee-validate/i18n

# or with npm
npm install @vee-validate/i18n

Usage

import the localize() function from @vee-validate/i18n which returns a message generator function:

import { defineRule, configure } from 'vee-validate';
import { required } from '@vee-validate/rules';
import { localize } from '@vee-validate/i18n';

// Define the rule globally
defineRule('required', required);

configure({
  // Generates an English message locale generator
  generateMessage: localize('en', {
    messages: {
      required: 'This field is required',
    },
  }),
});

If you have multiple locales in your application, you can add them like this:

import { defineRule, configure } from 'vee-validate';
import { required } from '@vee-validate/rules';
import { localize } from '@vee-validate/i18n';

// Define the rule globally
defineRule('required', required);

configure({
  generateMessage: localize({
    en: {
      messages: {
        required: 'This field is required',
      },
    },
    ar: {
      messages: {
        required: 'هذا الحقل مطلوب',
      },
    },
  }),
});

You can change the locale using setLocale function exported by the @vee-validate/i18n anywhere in your application:

import { setLocale } from '@vee-validate/i18n';

setLocale('ar');

Available Languages

To save you a lot of time translating @vee-validate/rules messages to your language, the awesome community around vee-validate already contributed over 40+ languages that you can use directly in your application and get started quickly. The localized files include localized messages for all the global rules provided by @vee-validate/rules package.

You can import the locales from their JSON directory like this:

import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import ar from '@vee-validate/i18n/dist/locale/ar.json';

configure({
  generateMessage: localize({
    en,
    ar,
  }),
});

You can view a list of the available languages by checking the locale folder