Vuejs - How to call the mounted function of main.js from another Js file

Question

This is the code I have given in commonValidation.js.

commonValidation.js:

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

I want to call the above file in main.js inside the mounted function like below. But it's not working. If I given those validation(from commonValidation.js) inside the mounted()(in main.js) method it's working.

main.js:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

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

Please help me to call the commonValidation.Js inside the mounted() in main.js . Thanks in advance.

This is my complete commonValidation.js

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

Answer 1

You are exporting an object in commonValidation.js file. An object cannot be invoked like a function.

I think your intent is to use a mixin. A mixin is nothing but an object that contains reusable component options as its properties.

So just register the mixin on the root component in your main.js file:

//main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate';
import commonValidation from './commonValidation'

Vue.use(VeeValidate);
Vue.use(BootstrapVue);

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    },
    mixins : [commonValidation]
}