Can you guide me on integrating a PrimeVue component into a Vue3 custom element?
I have created a Vue3 composition+setup custom element. I expect the button to be styled with PrimeVue and appear red due to the severity="danger" attribute.
However, it appears as a plain unstyled button.
<script setup lang="ts">
</script>
<template>
<Button severity="danger">Hello</Button>
</template>
<style scoped lang="scss">
</style>
This is how I included the custom element in my main file:
import MyElement from "@/views/MyElement.ce.vue";
customElements.define('my-element', defineCustomElement(MyElement))
Here is the plugins section in my Vite config:
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('my-')
}
}
})],
You can check out the code in this CodeSandbox link.