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?

yoduh · Accepted Answer · 2023-12-06 17:19:10Z

2

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');

answered Dec 6, 2023 at 17:19

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr.P Over a year ago

savior :) thx a bunch .. must have missed that in the docs ...

Collectives™ on Stack Overflow

PrimeVue not applying classes in Vue3 TS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related