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:
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" />
Well, you have to install two other libraries
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"]
});