[Vuejs]-How can I translate error messages in veevalidate?

by

4👍

✅

In your main configuration file you have to import locales and set the main locale

import attributesEs from 'vee-validate/dist/locale/es'
import attributesEn from 'vee-validate/dist/locale/en'
import VeeValidate, { Validator } from 'vee-validate'

window.Vue = Vue

Validator.localize('es',attributesEs);

Vue.use(VeeValidate, {
  locale: 'es',
  errorBagName: 'validations',
  fieldsBagName: 'inputs',
  dictionary: {
    translationsEn: { attributes: attributesEn },
    translationsEs: { attributes: attributesEs }
  }
});

In every input you have to add :data-vv-as=”$t(‘key_to_translate’)”
Example: 

<div class="form-group" :class="{'has-error': validations.has('width') }">
    <label for="width">{{$t('Width')}}</label>
    <input type="number" id="width" name="width" class="form-control" 
           :placeholder="$t('Width')" v-model="form.width"
           v-validate="'required'" :data-vv-as="$t('Width')">
    <span class="text-danger" v-if="validations.has('width') "
                              v-text="validations.first('width')"></span>
</div>

In this example also I’m using $t() .. a method of the vue-i18n package

Leave a comment