CODEWITHSUNDEEP
vue.jsjhipsterprimevue
EmreAltun
EmreAltun

Reputation: 423

how to add primevue css files to JHipster Project

I am trying to add primevue to my jhister with vue.js application. And I am following these steps.

1- run these comments

npm install primevue --save
npm install primeicons --save

2- add them to my vendor.scss

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

3- when I run npm start command. I am getting these error.

ERROR in ./src/main/webapp/content/scss/vendor.scss (./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./
node_modules/sass-loader/lib/loader.js??ref--9-3!./src/main/webapp/content/scss/vendor.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find 'node_modules/primevue/resources/primevue.min.css'
  in [
    C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\src\main\webapp\content\scss
  ]
    at resolveModule.catch.catch (C:\work\workspace\aymer workspace\fiyatkolay\fiyatkolayweb\node_modules\postcss-import\lib\resolve-id.js:35:13)
 @ ./src/main/webapp/content/scss/vendor.scss 4:14-231 14:3-18:5 15:22-239
 @ ./src/main/webapp/app/main.ts
 @ multi (webpack)-dev-server/client?http://localhost:9060 ./src/main/webapp/app/main.ts

how can I integrate primevue with my jhipster app. Thank you for your help!!!

Upvotes: 4

Views: 7867

Answers (1)

vicpermir
vicpermir

Reputation: 3702

I'm not very experienced with Vue but the official documentation examples import the CSS files directly. I checked primevue-quickstart and integrated both libraries successfully that way.

1. Install primevue and primeicons

Open a terminal and execute the following command if you are using npm:

npm i primevue primeicons

Or the following if you are using yarn:

yarn add primevue primeicons

2. Add the required CSS files

Open your main.ts file and add the following lines near the top:

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

3. Import the components you want to use

You can add the following lines of code to your main.ts file if you want all the PrimeVue components to be globally available. Or add them to [component-name].component.ts (e.g. home.component.ts) if you only want to make them available in a specific view.

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

4. Use the PrimeVue component in your view

Open your [component-name].vue (e.g. home.vue) file and start using the UI component by adding the HTML markup. I imported the Button component so in my case it's something like this:

<Button label="Click" icon="pi pi-check" />

I'm pretty sure we should be able to use both libraries the way you tried first, but I could not make it work any other way.

Upvotes: 4

Related Questions