Reputation: 2930
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
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