[Feature] Vue i18n integration

[logaretm]

Overview

VeeValidate uses a custom dictionary implementation with many features that include, messages, attributes and date formats. While it works fine for most projects, it causes redundant localization since VueI18n plugin is the go to plugin for Vue when it comes to localization and it offers all of what vee-validate needs and more.

This PR aims lets vee-validate use the vue-i18n dictionary implementation instead of the custom one, meaning your locales will only live in I18n plugin instance instead of both of them.

This feature is opt-in, you will need to provide i18n instance to the config.

Converting Old Localization Files

This plugin also allows transforming the vee-validate locales to the vue-i18n which should help you get started quickly.

import VeeValidate from 'vee-validate';
import en from 'vee-validate/dist/locale/en'
import VueI18n from 'vue-i18n';

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages: {}
})

Vue.use(VeeValidate, {
  i18n, // the vue-i18n instance
  i18nRootKey: 'validation' // where the locale keys for vee-validate will live in each locale.,
  dictionary: { // locales defined here will be converted to `vue-i18n` format.
    en
  }
});

new Vue({ i18n }).mount('#app');

Here is the structure that vee-validate expects inside an i18n locale:

type Locale = {
  messages: { [x: string]: string }, // Object containing string keys and values. Keys are validation rules.
  attributes: { [x: string]: string } // Object containing string keys and values. Keys are field names.
};

This PR also introduces the ability to create a custom localization driver, if you have more advanced needs.

Breaking Changes

This PR removes the ability to define localized messages when calling extend on the validator, you should prepare your messages before hand to be merged in the validator before using the rule. So now you can only provide either a validator function directly or an object containing validator and getMessage methods.

Caveats

• The vee-validate localization API like localize method or the locale setter will no longer have an effect as the localization is being entirely generated from vue-i18n plugin. However you can still merge locale and set messages/attributes using the dictionary property.

• Some rules like length have different messages depending on the parameters used in the validation run, so you might want to change the message to be more general.

This PR is still under progress and may change any mentioned details at anytime.

[codecov]

Codecov Report

Merging #1007 into master will increase coverage by 0.04%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #1007      +/-   ##
==========================================
+ Coverage    98.8%   98.85%   +0.04%     
==========================================
  Files          47       48       +1     
  Lines        1340     1395      +55     
  Branches      442      451       +9     
==========================================
+ Hits         1324     1379      +55     
  Misses         15       15              
  Partials        1        1

Impacted Files	Coverage Δ
src/core/mapFields.js	96.61% <ø> (ø)
src/rules/length.js	100% <ø> (ø)	⬆️
src/config.js	100% <100%> (ø)	⬆️
src/core/localization/default.js	100% <100%> (ø)
src/core/utils/index.js	96.06% <100%> (+0.25%)	⬆️
src/core/localization/i18n.js	100% <100%> (ø)
src/core/validator.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0836afe...f14fc48. Read the comment docs.

[d3bgger]

json structure doesn't seem to include anything about custom validation messages per field name

custom: { testFieldName:{ required: 'Test Message' } }

[logaretm]

@nkwinder should work the same, I actually omitted the custom, dateFormat, and _default properties. Full draft will be documented soon after supporting as many features as VueI18n provides.

[Mouvedia]

or an object containing validator and getMessage methods.

How do I know the current locale from within getMessage?
Did you add new parameters for the locale and the i18n dictionary?
If not should I import the locale myself so that I can use a switch case ?

[logaretm]

getMessage is not for localization, it only works for simple usecases where your app has a single language supported, otherwise use the localization API instead.