PrimeVue not applying classes in Vue3 TS

Question

I am playing around with PrimeVue but am not able to manage to work the styling ...

I can get the components and icons, but not the classes (styles)...

this is how my main.ts looks like:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import PrimeVue from 'primevue/config';

import '@/assets/main.css';
import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css';

import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(PrimeVue);

app.use(createPinia());
app.use(router);

app.mount('#app');

And this is my component

<script setup lang="ts">
import Card from 'primevue/card';
import Button from 'primevue/button';
</script>

<template>
  <div class="min-h-screen px-5 flex align-items-center justify-content-center">
    <Card style="width: 25em">
      <template #header> Header </template>
      <template #title> Advanced Card </template>
      <template #subtitle> Card subtitle </template>
      <template #content>
        <p class="m-0">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero
          asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
        </p>
      </template>
      <template #footer>
        <Button icon="pi pi-check" label="Save" />
        <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
      </template>
    </Card>
  </div>
</template>

<style lang="scss"></style>

However, the classes are not applied

I checked the primevue.min.css and it's empty (saying it's deprecatd

/**  * The primevue[.min].css has been deprecated. In order not to break existing projects, it is currently included in the build as an empty file.  */

Any idea what am I missing?

Answer 1

The warning is correct. Always follow the instructions of the latest documentation which specifies only importing the theme.css file

Also, you are getting PrimeVue styles as the buttons and texts clearly show. The tricky part is realizing that the classes you're looking at in the DOM inspector are not for PrimeVue but PrimeFlex, a separate companion library.

Run the install command in your terminal

npm install primeflex

Then update your main.ts importing the additional stylesheet /node_modules/primeflex/primeflex.css

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import PrimeVue from 'primevue/config';

import '@/assets/main.css';
import 'primevue/resources/themes/saga-blue/theme.css';
import '/node_modules/primeflex/primeflex.css';

import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(PrimeVue);

app.use(createPinia());
app.use(router);

app.mount('#app');