Localization module for VeeValidate
npm install @vee-validate/i18n> Localization module for vee-validate
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.
``sh
yarn add @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