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.
yarn add @vee-validate/i18n
# or with npm
npm install @vee-validate/i18n
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');
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