JHipster + Vue : How to use with PrimeVue

Issue

As title stated, I want to use PrimeVue for my JHipster project. I tried to follow the exact steps from here, find the exact file and paste inside them, but some errors stopped the application from running:

 ERROR in ./src/main/webapp/app/main.ts 61:0-56
[INFO] Module not found: Error: Can't resolve 'primevue/resources/themes/nova-light/theme.css' in '/home/pc/Desktop/JVue/src/main/webapp/app'
[INFO] resolve 'primevue/resources/themes/nova-light/theme.css' in '/home/pc/Desktop/JVue/src/main/webapp/app'
[INFO]   Parsed request is a module
[INFO]   using description file: /home/pc/Desktop/JVue/package.json (relative path: ./src/main/webapp/app)
[INFO]     Field 'browser' doesn't contain a valid alias configuration
[INFO]     resolve as module
[INFO]       /home/pc/Desktop/JVue/src/main/webapp/app/node_modules doesn't exist or is not a directory
[INFO]       /home/pc/Desktop/JVue/src/main/webapp/node_modules doesn't exist or is not a directory
[INFO]       /home/pc/Desktop/JVue/src/main/node_modules doesn't exist or is not a directory
[INFO]       /home/pc/Desktop/JVue/src/node_modules doesn't exist or is not a directory
[INFO]       looking for modules in /home/pc/Desktop/JVue/node_modules
[INFO]         /home/pc/Desktop/JVue/node_modules/primevue doesn't exist
[INFO]       /home/pc/Desktop/node_modules doesn't exist or is not a directory
[INFO]       looking for modules in /home/pc/node_modules
[INFO]         existing directory /home/pc/node_modules/primevue
[INFO]           using description file: /home/pc/node_modules/primevue/package.json (relative path: .)
[INFO]             using description file: /home/pc/node_modules/primevue/package.json (relative path: ./resources/themes/nova-light/theme.css)
[INFO]               no extension
[INFO]                 Field 'browser' doesn't contain a valid alias configuration
[INFO]                 /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css doesn't exist
[INFO]               .ts
[INFO]                 Field 'browser' doesn't contain a valid alias configuration
[INFO]                 /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.ts doesn't exist
[INFO]               .js
[INFO]                 Field 'browser' doesn't contain a valid alias configuration
[INFO]                 /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.js doesn't exist
[INFO]               .vue
[INFO]                 Field 'browser' doesn't contain a valid alias configuration
[INFO]                 /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.vue doesn't exist
[INFO]               .json
[INFO]                 Field 'browser' doesn't contain a valid alias configuration
[INFO]                 /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css.json doesn't exist
[INFO]               as directory
[INFO]                 /home/pc/node_modules/primevue/resources/themes/nova-light/theme.css doesn't exist
[INFO]       /home/node_modules doesn't exist or is not a directory
[INFO]       /node_modules doesn't exist or is not a directory
[INFO] 
[INFO] ERROR in ../../node_modules/primevue/button/button.esm.js 2:0-171
[INFO] Module not found: Error: Can't resolve 'vue' in '/home/pc/node_modules/primevue/button'
[INFO] resolve 'vue' in '/home/pc/node_modules/primevue/button'
[INFO]   Parsed request is a module
[INFO]   using description file: /home/pc/node_modules/primevue/button/package.json (relative path: .)
[INFO]     aliased with mapping 'vue': 'vue/dist/vue.esm.js' to 'vue/dist/vue.esm.js'
[INFO]       Parsed request is a module
[INFO]       using description file: /home/pc/node_modules/primevue/button/package.json (relative path: .)
[INFO]         resolve as module
[INFO]           /home/pc/node_modules/primevue/button/node_modules doesn't exist or is not a directory
[INFO]           /home/pc/node_modules/primevue/node_modules doesn't exist or is not a directory
[INFO]           /home/pc/node_modules/node_modules doesn't exist or is not a directory
[INFO]           looking for modules in /home/pc/node_modules
[INFO]             existing directory /home/pc/node_modules/vue
[INFO]               using description file: /home/pc/node_modules/vue/package.json (relative path: .)
[INFO]                 using exports field: ./dist/vue.esm.js
[INFO]                   using description file: /home/pc/node_modules/vue/package.json (relative path: ./dist/vue.esm.js)
[INFO]                     no extension
[INFO]                       Field 'browser' doesn't contain a valid alias configuration
[INFO]                       /home/pc/node_modules/vue/dist/vue.esm.js doesn't exist
[INFO]                     .ts
[INFO]                       Field 'browser' doesn't contain a valid alias configuration
[INFO]                       /home/pc/node_modules/vue/dist/vue.esm.js.ts doesn't exist
[INFO]                     .js
[INFO]                       Field 'browser' doesn't contain a valid alias configuration
[INFO]                       /home/pc/node_modules/vue/dist/vue.esm.js.js doesn't exist
[INFO]                     .vue
[INFO]                       Field 'browser' doesn't contain a valid alias configuration
[INFO]                       /home/pc/node_modules/vue/dist/vue.esm.js.vue doesn't exist
[INFO]                     .json
[INFO]                       Field 'browser' doesn't contain a valid alias configuration
[INFO]                       /home/pc/node_modules/vue/dist/vue.esm.js.json doesn't exist
[INFO]                     as directory
[INFO]                       /home/pc/node_modules/vue/dist/vue.esm.js doesn't exist
[INFO]           /home/node_modules doesn't exist or is not a directory
[INFO]           /node_modules doesn't exist or is not a directory
[INFO]  @ ./node_modules/ts-loader/index.js??clonedRuleSet-1[0].rules[0].use[0]!./src/main/webapp/app/core/jhi-footer/jhi-footer.component.ts?vue&type=script&lang=ts& 1:0-37 2:24-30
[INFO]  @ ./src/main/webapp/app/core/jhi-footer/jhi-footer.component.ts?vue&type=script&lang=ts& 1:0-157 1:173-176 1:178-332 1:178-332
[INFO]  @ ./src/main/webapp/app/core/jhi-footer/jhi-footer.vue 2:0-71 3:0-66 3:0-66 9:2-8
[INFO]  @ ./node_modules/ts-loader/index.js??clonedRuleSet-1[0].rules[0].use[0]!./src/main/webapp/app/app.component.ts?vue&type=script&lang=ts& 25:0-57 40:30-39
[INFO]  @ ./src/main/webapp/app/app.component.ts?vue&type=script&lang=ts& 1:0-144 1:160-163 1:165-306 1:165-306
[INFO]  @ ./src/main/webapp/app/app.vue 2:0-64 3:0-59 3:0-59 9:2-8
[INFO]  @ ./src/main/webapp/app/main.ts 42:0-28 108:23-26

I also tried to find relevant documentation but seems like not many JHipster devs using PrimeVue. May I know how to run Jhipster together with PrimeVue? Any help and suggestion is appreciated.

---

Edit: I apologized for not adding more information. My Vue version is 2.6.14. Here is my package.json (I afraid the code is too long so I shared the important part):

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "6.1.1",
    "@fortawesome/free-solid-svg-icons": "6.1.1",
    "@fortawesome/vue-fontawesome": "2.0.6",
    "axios": "0.26.1",
    "bootstrap": "4.6.1",
    "bootstrap-vue": "2.21.2",
    "bootswatch": "5.1.3",
    "dayjs": "1.11.0",
    "vue": "2.6.14",
    "vue-class-component": "7.2.6",
    "vue-cookie": "1.1.4",
    "vue-i18n": "8.27.1",
    "vue-infinite-loading": "2.4.5",
    "vue-property-decorator": "9.1.2",
    "vue-router": "3.5.3",
    "vue2-filters": "0.14.0",
    "vuelidate": "0.7.7",
    "vuex": "3.6.2"
  },
  "engines": {
    "node": ">=16.14.0",
    "npm": ">= 6.14.4"
  },

After that, I followed this by adding these codes in these relevant files. This is my main.ts (Also the code is too long so I just add what I added inside):

import 'primevue/resources/themes/nova-light/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

Since me as a newbie wanted to try adding UI component, I chose jhi-footer.vue because it has almost no component so I can add freely:

    <template>
      <div id="footer" class="footer">
        <p>This is your footer</p>
    <Button label="Click" icon="pi pi-check" />
      </div>
    </template>

<script lang="ts" src="./jhi-footer.component.ts"></script>

My jhi-footer.component.ts:

import Button from 'primevue/button';
Vue.component('Button', Button);

Solution

So after some hours, I finally integrate PrimeVue with JHipster. I am going to post my findings here for begineers who want to do the same and for my future reference.

First of all, check your Vue version for JHipster generated application. In your project file, open package.json and find Vue.

In fact, despite I use the latest version of JHipster (7.8.1), it still suprisingly generate Vue 2 application. You can check here for more information. I believe Vue 3 has different configuration.

After that, open /src/main/webapp/app/main.ts, add:

import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";

import PrimeVue from 'primevue/config';
Vue.use(PrimeVue);

and the global configuration is done. Now in my case, I want to add UI component for footer,

in jhi-footer.vue , add any component you want. I tried to add Button component:

<template>
  <div id="footer" class="footer">
    <p>This is your footer</p>
<Button label="Click" icon="pi pi-check" />
  </div>
</template>

and in jhi-footer.component.ts :

import Button from 'primevue/button';


export default {
  components: {
    Button
  }

That's all. When you start the application it should render the components you add.

Answered By - ZonG