vuejs3nuxt.jsnuxt3.jsprimevue

PrimeVue styles as "no defined" on Nuxt 3 app


What is happening?

My goal is to register PrimeVue as a module and import PrimeVue components correctly in my layouts with the default preset styles.

Thing is that when I inspect the button in the browser it has the PrimeVue classes but the style variables like colors are not defined.

For example:

--p-button-primary-color is not defined

What have I tried?

Using latest version of everything and followed this guide:

https://primevue.org/nuxt/

My nuxt.config.js looks like this:

export default defineNuxtConfig({
  ssr: false,
  css: ["@/assets/style/app.scss"],
  components: {
    dirs: ["~/components"],
  },
  modules: [
    "@pinia/nuxt",
    "nuxt3-notifications",
    "@nuxt/eslint",
    "dayjs-nuxt",
    '@nuxtjs/tailwindcss'
    '@primevue/nuxt-module'
  ],
  primevue: {
    preset: "Aura",
    options: {
      prefix: 'p',
      cssLayer: false
    }
  },
  dayjs: {
    locales: ['es', 'en'],
    plugins: ['relativeTime', 'utc', 'timezone'],
    defaultLocale: 'es',
    defaultTimezone: 'Europe/Madrid',
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  devtools: { enabled: true },
});

And the component I'm trying to import is this one:

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


Solution

  • Well, you have to install two other libraries

    1. primeicons for showing the icons in the primeVue library
    2. primevue/themes to add themes like Aura in the project (version 4.0.0-rc.2)

    after that, I changed my Nuxt.config.ts:

    import Aura from '@primevue/themes/aura';
     export default defineNuxtConfig({
      devtools: { enabled: true },
      modules: ["@primevue/nuxt-module"],
      primevue: {
        options: {
          theme: {
              preset: Aura,
          },
        }
      },
      css: ["primeicons/primeicons.css"]
    });