use primevue within vue custom element

Question

How do i use a primevue component within a vue3 custom element?

Here is my vue3 composition+setup custom element. The expected behavior is the button would be a primevue styled button and have the red color because of the severity="danger" attribute.

It shows up as a normal button unstyled.

<script setup lang="ts">
</script>

<template>
    <Button severity="danger">Hello</Button>
</template>

<style scoped lang="scss">
</style>

Here is how i included the custom element in my main.

import MyElement from "@/views/MyElement.ce.vue";
customElements.define('my-element', defineCustomElement(MyElement))

Here is my plugins section in my vite config.

plugins: [vue({
        template: {
            compilerOptions: {
                isCustomElement: (tag) => tag.startsWith('my-')
            }
        }
    })],

Here is a code sand box.

Answer 1

With the help from someone in the Vue community. I was able to get this fixed.

The codesandbox contains the working code.

Here is what i had to make my custom element look like for it to work.

I also needed to be on primevue version 3.38 or newer for it to work.

<script setup lang="ts">
import Button from "primevue/button";
</script>

<template>
  <Button severity="danger">Hello</Button>
</template>

<style scoped>
@import "primevue/resources/themes/lara-dark-teal/theme.css";
@import "primevue/resources/primevue.min.css";
</style>