I am currently facing an issue with integrating a web component into my Vue project. Despite seeing the element in the DOM, it appears as an empty tag instead of the button it should be. The first error I encountered was the absence of a declared module. I followed the suggestion provided in the error message and declared a module in tsconst.d.ts:
declare module 'wc-button';
Now, Vue is throwing a warning in the console stating that it is an unknown custom element and needs to be registered under components. However, since it is a web component, I don't think registration is necessary. I managed to suppress the warning by adding the web component to vue.config.ignoredElements, but this approach only masks the issue. Interestingly, when I switch to using JavaScript instead of TypeScript, the component works flawlessly. This leads me to believe that I need to properly declare a module for it, but I am unsure about the next steps. Does anyone have any examples or a repository that I could refer to for guidance?
Here is the code snippet for my component:
<template>
<div>
<button class="btn btn-primary" @click="onClick()">
Click!
</button>
<wc-button type="primary" @click="onClick()">
Click
</wc-button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import wcButton from 'wc-button';
export default Vue.extend({
data: () => ({
buttonOutput: 'I was clicked!',
}),
methods: {
onClick(): string {
return this.buttonOutput;
},
},
});
</script>