Injecting CSS in PrimeVue 4 Custom Preset with Nuxt Module Not Working?

[tonwiebsci]

We are trying to create our Preset for PrimeVue 4

We are attempting to create a custom Preset for PrimeVue 4 as demonstrated in this video. While overriding tokens seems to work correctly, we're having trouble injecting CSS styles via the preset when using the @primevue/nuxt-module.

Our Preset:

// theme/custom.ts
import { definePreset } from '@primevue/themes';
import Lara from '@primevue/themes/lara';

const FrameworkPreset = definePreset(Lara, {
  components: {
    button: {
      padding: {
        x: '10rem',
      },
      css: ({ dt }) => `
        .p-button.p-button-custom {
            color: orange;
        }
      `,
    },
  },
  css: ({ dt }) => `
    body {
        display: none !important
    }
    .p-button.p-button-custom {
        color: red;
    }
  `,
});

// Export FrameworkPreset as default
export default FrameworkPreset;

Nuxt Configuration:

    import path from 'path';
    import themePreset from './theme/custom';
    
    export default defineNuxtConfig({
      devtools: { enabled: true },
      primevue: {
        options: {
          theme: {
            preset: themePreset,
          },
        },
      },
      modules: ['@primevue/nuxt-module'],
      vite: {
        resolve: {
          alias: {
            '@': path.resolve(__dirname),
          },
        },
      },
      css: [
        '/node_modules/primeflex/primeflex.css',
        '/node_modules/primeicons/primeicons.css',
      ],
    });

Behavior:

• Overriding tokens (e.g., button.padding.x) works perfectly, so the preset is being applied at some level.
• However, none of the custom CSS rules appear in the compiled styles. For instance, body { display: none !important; } and .p-button.p-button-custom { color: red; } do not show up in the final CSS.
• Using the severity="custom" on a button <Button type="submit" severity="custom" label="Custom" /> does add the correct class p-button-custom to the DOM, but the corresponding CSS rules are missing.
• We've tried both css at the root level and under components.button, as shown in the video, but no difference.
  Initially, we aimed to use token values via ${dt('primary.50')}, but even with hardcoded colors the CSS isn't injected.

Minimal Reproduction: We created a minimal Nuxt StackBlitz example demonstrating the issue.

Question: Is there something special we need to do when using a custom preset with the @primevue/nuxt-module to inject CSS? Are we missing a configuration step, or is the Nuxt module not currently supporting CSS injection from definePreset as shown in the video?

-EDIT-

Same preset does inject the styles from the css property in a standalone vue application. Vue StackBlitz Example
And I can see both: root level and component.button level

, does that mean that there might be an issue with the PrimeVue nuxt module? or with nuxt?

We appreciate any insights or guidance on what might be going wrong. Thanks!

[tonwiebsci]

Added more details, seems like same preset works as expected on vue standalone but it does not fully work on nuxt-module