У меня есть пользовательский элемент Vue 3, в котором я хочу использовать Primevue & Primeflex и т. Д.
, поэтому я сначала создаю компонент, использую расширение. Наконец, я использую его в index.html, чтобы увидеть, работает ли он в браузере. < /P>
работает в некоторой степени, но не полностью. Например, я не уверен, как перевести app.use (primevue) для моего случая.
//customElement.ce.vue
Test
import { defineComponent } from "vue";
import AutoComplete from "primevue/autocomplete";
export default defineComponent({
name: "customElement",
props: {
msg: String,
},
components: { AutoComplete },
setup: () => {
console.log(JSON.stringify(theme));
return { PrimeVue };
},
styles: [],
});
< /code>
//main.ts
import { createApp, defineCustomElement } from "vue";
import App from "./App.vue";
//PrimeVue
import PrimeVue from "primevue/config";
import "/node_modules/primeflex/primeflex.css";
import "primevue/resources/primevue.min.css";
import "primevue/resources/themes/saga-blue/theme.css";
//CustomElement
import customElement from "@/components/customElement.ce.vue";
const customElementWC = defineCustomElement(customElement);
customElements.define("custom-element", customElementWC);
//Setup VueApplication for testing/reference, this works as expected.
const app = createApp(App);
app.use(PrimeVue);
app.mount("#app");
< /code>
//index.html (for testing)
We're sorry but doesn't work
properly without JavaScript enabled. Please enable it to
continue.
//test app
//the custom Web Component
< /code>
So I can see that the PrimeVue-Autocomplete is being shown, but the styles are not working.
So the question is:
How can I use all of PrimeVue in a custom Component?
Or in other words: How do I setup a Vue 3 CustomElement with PrimeVue?
Подробнее здесь: https://stackoverflow.com/questions/708 ... omelements
