How to integrate VeeValidate with vue-i18n?

Question

With a click event i change the vue-i18n language i want to change the vee-validate dictionary to the same language

main.js

import VeeValidate from 'vee-validate'
import validations from './validations.js'
import i18n from './lang'
Vue.use(VeeValidate)
new Vue({
   router,
   store,
   i18n,
   render: h => h(App)
}).$mount('#app')

vue-i18n folder > lang/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locals/en'
import es from './locals/es'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  messages: {
    en: {
      lang: en
    },
    es: {
      lang: es
    }
  }
})

vee-validate folder > src/validations.js

import {Validator} from 'vee-validate'
const dictionary = {
    en: {
        custom: {
            signupEmail: {
                required: 'Error',
            },
              
        }
    },
    es: {
        custom: {
            signupEmail: {
                required: 'Hubo un error',
            },
              
        }
    }    
}
Validator.localize(dictionary)
const validator = new Validator()
validator.localize('en')
export default Validator

Im trying to target the validator.localize('en') and i cant change to the es dictionary, even if i change it manually validator.localize('es'). What im missing?

score 2 · Answer 1 · answered Jun 29 '20 at 13:07

2

It looks like you're close, but missing a few key pieces.

You can pass an object like this when you wire up VeeValidate:

Vue.use(VeeValidate, {
   i18nRootKey: 'custom', // customize the root path for validation messages.
   i18n,
   dictionary: {
    en: {
    custom: {
        signupEmail: {
            required: 'Error',
        },        
      }
    },
    es: {
    custom: {
        signupEmail: {
            required: 'Hubo un error',
        },    
       }
     }
   }
});

Obviously I just put your dictionary inline here, it would be much better to keep it as a separate file and import it that way.

answered Jun 29 '20 at 13:07

maxshuty

9,708
13
64
77

hi @maxshuty i think stil im missing something, this is what i did with your code, 1. comment validations.js 2. Add your code to the main.js 3. change the language and still getting only english – Alex Hunter Jun 29 '20 at 16:20
@AlexHunter are you positive that your language is actually triggering the change you think it is? – maxshuty Jun 29 '20 at 20:34
of course, actually im changing languages at the same time with moment.js and vue-i18n, but i cant make it work with veevalidate – Alex Hunter Jun 29 '20 at 20:36
Are you loading VeeValidate _before_ i18n into the Vue instance? – maxshuty Jun 30 '20 at 00:57
yes, as you can see in the main.js, i added your code and change it for Vue.use(VeeValidate) and nothing happens @maxshuty – Alex Hunter Jun 30 '20 at 07:15
@AlexHunter there must be something else in play here if you have the code I added and it's still not working. Can you verify that the `i18nRootKey` is setup correctly with your dictionary? – maxshuty Jul 02 '20 at 15:56
its the correct i18nRootKey. I think the problem is with the configuration of the dictionary @maxshuty what do you think? – Alex Hunter Jul 02 '20 at 18:05
@AlexHunter I just realized that I am on v2.x of VeeValidate and my logic may not apply to 3+. What version are you on? Here is a sandbox for the more recent stuff: https://codesandbox.io/s/veevalidate-30-vuei18n-integration-9vs4l?from-embed=&file=/src/components/Example.vue. Do you have i18n setup – maxshuty Jul 02 '20 at 21:21
im using version 2, and yes i saw that codesanbox and cant make it work – Alex Hunter Jul 02 '20 at 22:01
@maxshuty can you show within in your provided codesandbox some example with using vee-validate, i18n and local messages files (eg.: locals/en.json) ? – Luc Jan 23 '21 at 21:45
@Luc you could just `import en from '../locals/en` and then inside of the dictionary here `en: en`, etc. – maxshuty Jan 24 '21 at 00:06
1

Thanks. Kind of did it :) https://codesandbox.io/s/veevalidate-30-vuei18n-integration-forked-lsmzs?file=/src/components/Example.vue – Luc Jan 25 '21 at 06:35

score -1 · Accepted Answer · answered Jul 11 '20 at 15:35

-1

I figured out myself how to do it.

In the App.vue set inside the mounted cycle hook

VeeValidate.Validator.locale = `${language}`

answered Jul 11 '20 at 15:35

Alex Hunter

212
9
30

How to integrate VeeValidate with vue-i18n?

2 Answers2