How to localize error messages in vuejs using vee-validation

Question

I want to localize some of the messages and attributes name using vee-validation. I'm able to localize the messages only when using E.g: this.$validator.localize('en', { messages: { required: (field) => '* ' + field + required'}, attributes: { email: 'Email' }}); inside the "created()" function. But I would like to give this in the "main.js". Whenever I'm calling this in the main.js it's throwing error like:

"Uncaught TypeError: Cannot read property 'localize' of undefined"

My code in main.js. I have given this code in main.js because I would like to access through out my project in all vue files. Below is my code.

import Vue from 'vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import { Validator } from 'vee-validate';

Vue.use(VeeValidate);

this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    });

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

score 1 · Answer 1 · answered May 03 '18 at 07:24

1

In your code example, this.$validator is called in the middle of nowhere... you need to put it inside your Vue instance, in the mounted hook for example :

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  },
  mounted() {
    this.$validator.localize('en', {
      messages: {
        required: (field) => '* ' + field + ' is required'
      },
      attributes: {
        email: 'Email'
      } 
    })
  }
})

answered May 03 '18 at 07:24

Sovalina

5,410
4
22
39

What is the difference between mounted() and created() ?? – Ashwini May 03 '18 at 08:16
@Ashwini You can check [VueJS documentation](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram), Vue instance lifecycle is very well explained :) – Sovalina May 03 '18 at 08:23
Ok I can check it in it. Iam new to vuejs . That's why lots of doubts and questions. Pls, don't get annoyed. If you could pls answer for this [link](https://stackoverflow.com/questions/50151874/javascript-functions-are-not-working-properly-in-the-vuejs) – Ashwini May 03 '18 at 09:47
Thanks@sovalina. what is the reason for this [link](https://stackoverflow.com/questions/50039160/want-to-know-the-debugging-process-of-vue-js-because-when-compare-to-javascript?noredirect=1#comment87112192_50039160). Is there any solution for this?? – – Ashwini May 03 '18 at 10:41

score 0 · Answer 2 · answered Jul 31 '19 at 15:57

If we want to Change all Default Message include some attributes changes. Define you message and then mounted in main js file

         const dict = {
            messages: {
                required: (field) => 'Please Enter ' + field + ''
            },
            attributes: {
                name: 'Name',
                email: 'Email Id '
            }
        }
        const app = new Vue({
            el: '#app',
            router: router,
            components: {
                App
            },
            mounted() {
                this.$validator.localize('en', dict);
            }
        });

  //  Make to change in single required message
    const dict = {
        custom: {
            email: {
                required: 'Please Enter Valid Email Id'
            },
            name: {
                required: 'Name include first and last name'
            }
        }
    }
    const app = new Vue({
        el: '#app',
        router: router,
        components: {
            App
        },
        mounted() {
            this.$validator.localize('en', dict);
        }
    });

How to localize error messages in vuejs using vee-validation

2 Answers2

Linked