PrimeVue styles as "no defined" on Nuxt 3 app

Question

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" />

Answer 1

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"]
});