5

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?

2 Answers 2

2
+25

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.

12
  • 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 Jun 29, 2020 at 16:20
  • @AlexHunter are you positive that your language is actually triggering the change you think it is?
    – maxshuty
    Jun 29, 2020 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 Jun 29, 2020 at 20:36
  • Are you loading VeeValidate before i18n into the Vue instance?
    – maxshuty
    Jun 30, 2020 at 0:57
  • 1
    Thanks. Kind of did it :) codesandbox.io/s/…
    – Luc
    Jan 25, 2021 at 6:35
-1

I figured out myself how to do it.

In the App.vue set inside the mounted cycle hook

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.