Styjun

This is a question about the integration of vee-validate and vue-i18n + additional error message for a custom rule. I could get every single detail to work alone, but not the whole combination (this is the excuse for the long question).

The program flow is as follows:

1. A web page containing vue.js component loads from server. The vue.js component loads vee-validate and vue-i18n and defines a custom rule. It does not pre-load any language data - so on created() it checks the language of the container web page and loads it's localized texts from the server via ajax call.


2. 
   

   It is straightforward to set these messages to the vue-i18n simply so:

   
   
   

   this.$i18n.mergeLocaleMessage(localeName, newLocaleMessages)

   
   



3. Somehow I have to tell vee-validate to change its language also ...
   I want to load the corresponding vee-validate locale with its default error messages

and

I want to add my custom error message translation to the validation messages.

And here I have the problems

While it is possible to pre-load all needed vee-validate localisations like so:

import en from 'vee-validate/dist/locale/en'
...
import de from 'vee-validate/dist/locale/de'
...
Vue.use(VeeValidate, 
 i18nRootKey: 'validations',
 i18n,
 dictionary: 
 en: en
 ...
 de: de
 
)

I do not want to do it as it does not make sense to load multile data if the component won't use it.

It is better to load the data dynamically.

And if one does not use vue-i18n it works perfectly like that:

if (this.$validator.dictionary.hasLocale(localeName)) 
 this.$validator.localize(localeName);
 else 
 import(`vee-validate/dist/locale/$localeName`).then(locale => 
 this.$validator.localize(localeName, locale);
 );


/from ajax/ -> custom_dictionary = 
 /localeName/ : 
 messages: 
 customMessage: "TRanslation in /localeName/"
 
 
;

this.$validator.localize(custom_dictionary);

But then I want to use vue-i18n. So this.$validator... does not work anymore.
One also has to load the default language explicitly:

Vue.use(VeeValidate, 
 i18nRootKey: 'validations',
 i18n,
 dictionary: 
 en: en
 
)

and when I try:

import(`vee-validate/dist/locale/$localeName`).then(locale => {
 this.$i18n.mergeLocaleMessage(localeName, locale)
or 
 this.$i18n.mergeLocaleMessage(localeName, locale.messages)
or
 this.$i18n.mergeLocaleMessage(localeName, locale.default.messages)

it does not work (the corresponding object in $i18n is created but stays empty).

Is there another syntax that would work?

It is somehow awkward that one cannot just call a method like $validator.loadLanguage(localeName).then(set it to i18n).

One also cannot define by the custom rule something like:

getMessage : () => get the message from $i18n using this key 

as the getMessage function is called only once with the currently loaded language.

Another restriction is that the message key should be the name of the custom rule - so every time I get it from the API I have to create new object with that name and pass it to the vv validator to localize it (put it in the corrsponding dictionary).

So at the end I actually cannot understand what is the profit to use vee-validate integrated with $i18n? I would consider to use them just separately. Or where am I wrong?

Any ideas for flawless integration are much appreciated. Thanks in advance!