vee-validate: Vee-Validate locale change from EN to NL not working

Versions:

VueJs: 2.1.10
Vee-Validate: 2.0.0-beta.25

Description:

I’m building a app with Laravel 5.4 and Vue 2.1.10 Now i installed vee-validate 2.0 and everything seems to look fine, like validating except for my locale setting. I want the default EN change to NL (dutch language) but the validating error messages are still default English.

My configuration in my app.js:

import messages from '../../../node_modules/vee-validate/dist/locale/nl';
import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';

// Merge the locales.
Validator.updateDictionary({
    nl: {
        messages
    }
});

const config = {
    locale: 'nl',
};

Vue.use(VeeValidate, config);

The script i use on my page Really basic, my form is validating but shows the messages in English not in Dutch.

new Vue({
    el: '#app',
    locale : 'nl'
});

Steps To Reproduce:

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 15 (4 by maintainers)

Most upvoted comments

It works for me on version ^2.1.0-beta.6

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

Validator.localize({ vi: vi })
Vue.use(VeeValidate, {locale: 'vi'})

+47

tranghaviet on Jul 7, 2018

This setup works great on v: 2.0.0-beta.25! Thanks @logaretm

import Vue from "vue";
import VeeValidate from "vee-validate";
import VeeValidateMessagesBR from "vee-validate/dist/locale/pt_BR";

VeeValidate.Validator.addLocale(VeeValidateMessagesBR);
Vue.use(VeeValidate, {locale: 'pt_BR'});

+18

kamihouse on Mar 9, 2017

Sorry about that, few things has been changed since beta.24

The built locales actually export an object containing the locale name and the locale object, not the messages as it used to be, so you are going to do the following:

import messages from 'vee-validate/dist/locale/nl';
import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import App from './App.vue';

// Merge the locales.
Validator.addLocale(messages);

const config = {
    locale: 'nl'
};

Vue.use(VeeValidate, config);

new Vue({
  el: '#app',
  render: h => h(App)
})

I will update the docs, thanks for the feedback

+16

logaretm on Mar 9, 2017

it is a .js file which looks like this (it’s not fully translated yet, I tested it with required and email messages):

// @todo: translate!
const messages = {
    _default : (field) => `The ${field} value is not valid.`,
    after : (field, [target]) => `The ${field} must be after ${target}.`,
    alpha_dash : (field) => `The ${field} may contain alpha-numeric characters as well as dashes and underscores.`,
    alpha_num : (field) => `The ${field} may only contain alpha-numeric characters.`,
    alpha_spaces : (field) => `The ${field} may only contain alphabetic characters as well as spaces.`,
    alpha : (field) => `The ${field} may only contain alphabetic characters.`,
    before : (field, [target]) => `The ${field} must be before ${target}.`,
    between : (field, [min, max]) => `The ${field} must be between ${min} and ${max}.`,
    confirmed : (field) => `The ${field} confirmation does not match.`,
    credit_card : (field) => `The ${field} is invalid.`,
    date_between : (field, [min, max]) => `The ${field} must be between ${min} and ${max}.`,
    date_format : (field, [format]) => `The ${field} must be in the format ${format}.`,
    decimal : (field, [decimals] = ['*']) => `The ${field} must be numeric and may contain ${decimals === '*' ? '' : decimals} decimal points.`,
    digits : (field, [length]) => `The ${field} must be numeric and exactly contain ${length} digits.`,
    dimensions : (field, [width, height]) => `The ${field} must be ${width} pixels by ${height} pixels.`,
    email : (field) => `Pole ${field} musí být platnou emailovou adresou.`,
    ext : (field) => `The ${field} must be a valid file.`,
    image : (field) => `The ${field} must be an image.`,
    in : (field) => `The ${field} must be a valid value.`,
    ip : (field) => `The ${field} must be a valid ip address.`,
    max : (field, [length]) => `The ${field} may not be greater than ${length} characters.`,
    max_value : (field, [max]) => `The ${field} must be ${max} or less.`,
    mimes : (field) => `The ${field} must have a valid file type.`,
    min : (field, [length]) => `The ${field} must be at least ${length} characters.`,
    min_value : (field, [min]) => `The ${field} must be ${min} or more.`,
    not_in : (field) => `The ${field} must be a valid value.`,
    numeric : (field) => `The ${field} may only contain numeric characters.`,
    regex : (field) => `The ${field} format is invalid.`,
    required : (field) => `Pole ${field} je povinné.`,
    size : (field, [size]) => `The ${field} must be less than ${size} KB.`,
    url : (field) => `The ${field} is not a valid URL.`
};

const attributes = {
    email           : "Email",
    password        : "Heslo",
    old_password    : "Současné heslo",
    new_password    : "Nové heslo",
    name            : "Jméno"
};

const locale = {
    name : 'cs',
    messages,
    attributes
};

export default locale;

Arxi on Apr 17, 2017

For me, after trying everything, only this worked:

import Vue from "vue";
import VeeValidate from "vee-validate";
import validationLocaleCs from "src/lang/cs.validation";

VeeValidate.Validator.addLocale(validationLocaleCs);
Vue.use(VeeValidate, {locale: 'cs'});
VeeValidate.Validator.setLocale('cs');

notice the call to setLocale. Without that, the messages would stay in English.

Arxi on Mar 28, 2017

add this way to document, otherwise it will make others feel unsure about that.

Loliner on Mar 12, 2017

You can use webpack’s async modules using import() should split your app files and import them when needed, I can’t think of another way atm.

logaretm on Apr 17, 2017

@logaretm but that example is rather confusing, if you aren’t adding the Vue.use() part, then you should consider kamihouse’s approach instead.

Frondor on Mar 12, 2017