Sazzadur Rahman
Sazzadur Rahman

Reputation: 2930

How to use VeeValidate or any third party package locally inside vue component

Ok here is the situation, I am working on a SPA with Vue.js. I am using VeeValidate in one of my component say in Component1.vue like this,

import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

export default {
    //...
}

In another component say in Component2.vue I am using vuetable-2 which I registered like this,

import Vuetable from 'vuetable-2/src/components/Vuetable';

export default {
    components: {
        Vuetable
    },

   //...
}

The problem is that both VeeValidate and Vuetable internally depends on a computed property with same name. And as I am registering VeeValidate globally like Vue.use(VeeValidate);, if I navigate from Component1 to Component2, Vuetable gives an error saying,

The computed property "fields" is already defined as a prop

because VeeValidate already registered itself globally when I landed on Component1.

If I navigate to Component2 from any other component which does not have any dependency with VeeValidate then it works just fine.

So here is my question,

How do I register VeeValidate or any other package inside Component1.vue locally so that it does not influence other components? much like registering other components inside components: {} object.

Upvotes: 1

Views: 1127

Answers (1)

Brian Lee
Brian Lee

Reputation: 18197

Vee validate allows you to change the field and error bag names through the configuration. It's in the docs here.

const config = { 
     errorBagName: 'errors', // change if property conflicts 
     fieldsBagName: 'fields',
}

Also maybe if interest, the advanced configuration section explains how to inject instances into components instead of globally.

Upvotes: 1

Related Questions