PrimeVue partially work in custom vue web component #2539

SAntoineS · 2024-08-19T14:19:20Z

SAntoineS
Aug 19, 2024

Hi,

I try to make a custom vue web component using PrimeVue and TailwindCSS.

Config :

"dependencies": {
        "@primevue/themes": "^4.0.4",
        "primeicons": "^7.0.0",
        "primevue": "^4.0.4",
        "vue": "^3.4.27"
    },
"devDependencies": {
        "@primevue/auto-import-resolver": "^4.0.4",
        "@types/node": "^20.14.2",
        "@vitejs/plugin-vue": "^5.0.5",
        "@vue/tsconfig": "^0.5.1",
        "autoprefixer": "^10.4.20",
        "npm-run-all": "^4.1.5",
        "postcss": "^8.4.41",
        "tailwindcss": "^3.4.10",
        "typescript": "^5.4.5",
        "unplugin-vue-components": "^0.27.4",
        "vite": "^5.2.13",
        "vue-tsc": "^2.0.21"
    }

Files :

main.ts

import PrimeVue from "primevue/config";
import Aura from "@primevue/themes/aura";

import ToastService from "primevue/toastservice";
import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue';

import "./assets/main.css";
import "primeicons/primeicons.css";

import formApiRequest from './components/form-api-request.ce.vue';

const defineCustomElement = (component: any) =>
    VueDefineCustomElement({
        ...component,
        render: () => h(component),
        setup() {
            const app = createApp({});

            app.use(PrimeVue, {theme: {preset: Aura},});
            app.use(ToastService);

            // args.plugins.forEach(app.use);

            const instance: any = getCurrentInstance();
            Object.assign(instance.appContext, app._context);
            Object.assign(instance.provides, app._context.provides);
        },
    })
const myFormComponent = defineCustomElement(formApiRequest);
customElements.define('mdref-wizard', myFormComponent);

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" href="/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Vite App</title>
</head>
<body>
<mdref-wizard></mdref-wizard>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

form-api-request.ce.vue

<script lang="ts" setup>
import {ref} from "vue";
import {useToast} from "primevue/usetoast";

const toast = useToast();

const increaseCount = () => {
  count.value++;

  if (count.value === 3) {
    toast.add({severity: "success", summary: "PrimeVue", detail: "Welcome to PrimeVue + Create Vue", life: 3000});
    count.value = 0;
  }
};

const count = ref(0);
const visible = ref(false);
const date = ref();

</script>

<template>
  <div class="border border-red-500 flex flex-col items-center justify-center h-screen">
    <Toast/>
    <div class="flex gap-2 pb-4">
      <i class="pi pi-check"></i>
      <i class="pi pi-times"></i>
      <span class="pi pi-search"></span>
      <span class="pi pi-user"></span>
    </div>

    <Button type="button" @click="increaseCount" label="Count"></Button>
    <h5 class="green">{{ count }}</h5>
    <Button label="Show" @click="visible = true"/>
    <DatePicker v-model="date" />
    <Dialog v-model:visible="visible" :draggable="false" header="Edit Profile" :style="{ width: '25rem' }">
      <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
      <div class="flex items-center gap-4 mb-4">
        <label for="username" class="font-semibold w-24">Username</label>
        <InputText id="username" class="flex-auto" autocomplete="off"/>
      </div>
      <div class="flex items-center gap-4 mb-8">
        <label for="email" class="font-semibold w-24">Email</label>
        <InputText id="email" class="flex-auto" autocomplete="off"/>
      </div>
      <div class="flex justify-end gap-2">
        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
        <Button type="button" label="Save" @click="visible = false"></Button>
      </div>
    </Dialog>
  </div>
</template>


<style scoped>
@import "../assets/main.css";
</style>

I used the default component in the docs but the problem is that the style is partially working, like this screen shot of form-api-request.ce.vue :

The 2 buttons "Count" and "Show" has no style, even for the "DatePicker".

But If I toggle the toast :

It's juste fine...

Same for the "DatePicker" :

Or even the "Dialog" :

In the "Dialog" the buttons and inputs work fine and I don't know why ??

I can't find topics using Vue 3 / PrimeVue / Tailwind in custom web component.

Anyone can help me ?

It's my first time here in github disscussions so tell me if you need more files or screenshots.

Thanks !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PrimeTek

PrimeVue partially work in custom vue web component #2539

{{title}}

Replies: 0 comments

Select a reply

PrimeTek

PrimeVue partially work in custom vue web component #2539

SAntoineS Aug 19, 2024

Config :

Files :

Replies: 0 comments

SAntoineS
Aug 19, 2024