How do I use PrimeVue with Web Components?

UI Components for Vue
Post Reply
DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

18 Oct 2022, 20:30

I'm trying to get PrimeVue to work with Web Components, but I'm having NO luck.

Everything works fine when mounting as a standard app, but not when using defineCustomElement.

The components are displayed, but with no styles.

Are there any simple demos or guidelines for how to get it to work correctly?

Any help to get this working would be GREATLY APPRECIATED!

main.js

Code: Select all

 import { defineCustomElement } from 'vue';
 import Test from './Test.ce.vue'

 const element = defineCustomElement(Test);
 customElements.define('my-component', element)
Test.ce.vue

Code: Select all

<template>
  <div class="grid p-2">
    <div class="col-12">
      <card>
        <template #content>
         Card TEST
         <Button type="button" icon="pi pi-caret-right" label="Press Me" />
        </template>
      </card>
    </div>
  </div>

</template>

<script setup>

import PrimeVue from 'primevue/config';
import Card from 'primevue/card';
import Button from 'primevue/button';
import 'primeflex/primeflex.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css'; 

</script>
index.html

Code: Select all

<!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>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
    <my-component></my-component>
  </body>
</html>

vite.config.js

Code: Select all

import { defineConfig } from 'vite'

import { fileURLToPath, URL } from 'url'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from "vite-plugin-eslint";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), eslintPlugin()],
  isCustomElement: (tag) => tag.includes('-'),  
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
package.json

Code: Select all

{
  "name": "vue-create-example",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "primeflex": "^3.2.1",
    "primeicons": "^6.0.1",
    "primevue": "^3.17.0",
    "vue": "^3.2.36"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-prettier": "^7.0.0",
    "eslint": "^8.5.0",
    "eslint-plugin-vue": "^9.0.0",
    "prettier": "^2.5.1",
    "vite": "^2.9.12",
    "vite-plugin-eslint": "^1.6.1"
  }
}


bahadirsofuoglu
Posts: 84
Joined: 06 Sep 2022, 08:59

19 Oct 2022, 09:30

Hi,
Have you tried importing the CSS in main.js first and then adding the components globally? Maybe if you create a reproducing link we can experiment with it.

DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

20 Oct 2022, 01:22


DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

24 Oct 2022, 16:53

@bahadirsofuoglu, any luck in getting this to work? If it's too complicated/not feasible then I'll have to go another direction with this. We're trying to update an existing website and I'd prefer to use PrimeVue, but might have to go another direction.

Thanks,
Doug

bahadirsofuoglu
Posts: 84
Joined: 06 Sep 2022, 08:59

25 Oct 2022, 09:48

I believe you can use PrimeVue. But a code sandbox or similar link would be very helpful to me. I also prepare an example of it. Thank you very much for your understanding.

DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

25 Oct 2022, 17:48

Here's a link to the complete zipped project that I provided before.

https://drive.google.com/file/d/11LnFm3 ... qV_Lm/view

Let me know if this isn't sufficient or you need something else.

Thanks,
Doug

bahadirsofuoglu
Posts: 84
Joined: 06 Sep 2022, 08:59

31 Oct 2022, 13:24

Hi, I think I found the solution. Maybe we can find a better solution for css imports but now you can try this.

Code: Select all

<template>
  <div class="grid p-2">
    <div class="col-12">
      <Card>
        <template #content>
         Card TEST
         <Button type="button" icon="pi pi-caret-right" label="Press Me" />
        </template>
      </Card>
    </div>
  </div>

</template>


<script setup>
import Card from '../node_modules/primevue/card';
import Button from 'primevue/button';

</script>

<style>
@import 'https://cdn.jsdelivr.net/npm/primevue@3.17.0/resources/primevue.min.css';
@import 'https://cdn.jsdelivr.net/npm/primevue@3.17.0/resources/themes/saga-blue/theme.css';
@import 'https://cdn.jsdelivr.net/npm/primeicons@5.0.0/primeicons.css';
@import 'https://cdn.jsdelivr.net/npm/primeflex@2.0.0/primeflex.min.css';

</style>

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests