在 vue 自定义元素中使用 primevue

Question

如何在 vue3 自定义元素中使用 primevue 组件？

这是我的 vue3

composition+setup

自定义元素。预期的行为是该按钮将是 primevue 样式的按钮，并且由于

severity="danger"

属性而具有红色。

它显示为一个无样式的普通按钮。

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

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

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

这是我如何将自定义元素包含在我的 main 中。

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

这是我的 vite 配置中的

plugins

部分。

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

这是一个代码沙箱。

Answer 1

在 Vue 社区某人的帮助下。我能够解决这个问题。

codesandbox包含工作代码。

这是我必须让我的自定义元素看起来像它才能工作。

<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>