I attempted to construct my own component library using Vuetify, utilizing vue-cli vue create d-components. I registered my components through an install function that was exported in the main.ts file of my library like this:
import Vue, { VueConstructor } from 'vue';
import Vuetify from 'vuetify';
import DBtn from "./components/DBtn.vue";
Vue.use(Vuetify)
export default {
install(vue: VueConstructor): void {
vue.component("d-btn", DBtn);
...
}
}
One of the components is defined as follows:
<template>
<v-btn v-bind="$attrs" v-on="$listeners" elevation="0" small>
...
</v-btn>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({})
export default class DBtn extends Vue {}
</script>
I included this library as a git submodule in my primary Vue.js application (which also uses Vuetify), performed npm install, and ran npm link in the root folder of the submodule, then executed npm link d-components in my main Application directory.
My application imports & calls the install function of my library like this:
import Vue from 'vue';
import DComponents from "d-components" // name of the library
Vue.use(DComponents);
Everything appears to be functioning correctly so far.
However, when attempting to use the components from my library, a series of errors are generated:
[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.It appears that this issue arises due to the creation of two instances of Vue within my application. I have checked to ensure that all my imports of Vue are consistent, but I only found import Vue from 'vue' in both my main application and my library.
Does anyone have any suggestions on how to verify whether multiple instances of Vue are being created?