How can I translate error messages in veevalidate?

Question

In laravel I am using vue and veevalidate to validate the forms in real time. The problem is that the error messages appear in English on the veevalidate page, the example is not very clear to me. Can someone guide me? This is example of my form

<script>
import VeeValidate from 'vee-validate';
import { Validator } from 'vee-validate';
const dictionary = {
  custom: {
    email: {
      required: 'Escribe tu email',
      min: 'Tú email es muy corto',
      email: 'invalido'
    },
    name: {
      required: () => 'Escribe tu nombre'
    }
  }
};

Vue.use(VeeValidate, {
    classes: true,
    classNames: 
    {
      valid: "is-valid",
      invalid: "is-invalid"
    }
});

export default {
    mounted() {
            console.log('validador')
            Validator.localize(dictionary);
    }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">Nombre:</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control" name="name"  required autofocus>

                               
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email" class="col-md-4 col-form-label text-md-right">Correo electrónico</label>
                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" v-validate.continues="'required|email|min:5'">
                                <div v-show="errors.has('email')" class="invalid-feedback">
                                    <ul>
                                        <li v-for="error in errors.collect('email')">{{ error }}</li>
                                    </ul>
                                </div>
                                <span>{{ errors.first('email') }}</span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">Contraseña</label>

                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control" name="password" required>

                               
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">Confirmar contraseña</label>

                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Registrarme
                                </button>
                            </div>
                        </div>
 </div>                   
</template>

Remember that you have to ask here in english, for spanish community: https://es.stackoverflow.com/ — Walter Cejas, Mar 05 '19 at 15:41
I'm voting to close this question as off-topic because it should be on es.stackoverflow.com — stdunbar, Mar 05 '19 at 15:43

score 4 · Accepted Answer · answered Mar 05 '19 at 15:50

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

Thank you, for your early answer, I try you recommendation. – Roberto Mar 07 '19 at 14:41 — Roberto, Mar 07 '19 at 14:41

How can I translate error messages in veevalidate?

1 Answers1