Vee-validate: Localization hot reload

[PrimozRome]

Versions:

• VueJs: 2
• Vee-Validate: 2.0.0-rc.21
• Nuxt: 1.0.0-rc9

Description:

First of all thank you for excellent library. I love to use it. I have integrated it into my Nuxt.js project but I want to implement hot-reload of the localisation files.

I initialise vee-validate inside plugins directory like this:

import Vue from 'vue'
import VeeValidate from 'vee-validate'

Vue.use(VeeValidate, {
  fieldsBagName: 'vFields',
  inject: true,
  locale: 'en'
})

My app has implemented hot reload for changing locale, but I need to integrate this into vee-validate as well. I haven't been successful. I have tried this, but the locale won't change:

import VeeValidate, { Validator } from 'vee-validate'

Validator.localize('sl')

If I do this

import VeeValidate, { Validator } from 'vee-validate'
import sl from 'vee-validate/dist/locale/sl'

Validator.localize('sl', sl)

then it works. Do I need to import all my available locales in advance in other to hot reload? I don't want to do that because I would have unused imports until I switch to that locale ...

Any advice?

[logaretm]

You can call Validator.localize at any point in your application from any component that has a validator instance.

For example if you have a dropdown language selector in the footer, you could only download the locale when it changes with dynamic import() then activate the locale.

[PrimozRome]

Yes that's how it would be ideal but I don't know how to dynamically or programatically import locale when that action is triggered? Imports need to be done when component load right?

[logaretm]

@PrimozRome take a look here:

https://webpack.js.org/guides/code-splitting/#dynamic-imports

it would be something along this lines:

function changeLocale (locale) {
  import(`../locales/${locale}`).then(localeModule => {
    this.$validator.localize(locale, localeModule);
  })
}

[PrimozRome]

@logaretm thank a lot