@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

``sh
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:

`js
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:

`js
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:

`js
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:

`js
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