Style config file breaks vuetify styles on SSR since v0.18.0

[Kapcash]

Since v0.18.0, adding the configFile to customize the vuetify/settings scss variables breaks the vuetify styling on server side. When loading the app, we can see the components have no style, and then it gets loaded on client side correctly.

Reverting the version to v0.17.x fixes the issue.

Reproduction on Stackblitz: https://stackblitz.com/edit/github-6wavaj?file=package.json

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true,
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  modules: ['vuetify-nuxt-module'],

  css: ['./assets/styles/vuetify-globals.scss'],

  vuetify: {
    moduleOptions: {
      disableVuetifyStyles: true,
      styles: {
        configFile: './assets/styles/vuetify-components.scss', // <-- remove this and the SSR styles work
      },
    },
  },

  features: {
    inlineStyles: true,
  },
});

[Kapcash]

Additional notes:

• setting disableVuetifyStyles to false breaks the build. The vuetify styles are not found.
• Whether we set features.inlineStyles to true or false doesn't change the output, since the module overwrites this value automatically: https://github.com/vuetifyjs/nuxt-module/blob/8f93bcbdef2f0474931e06464789eade2b876762/src/utils/configure-nuxt.ts#L29
• Switching from @use 'vuetify' to @forward 'vuetify' doesn't change anything.
• Removing the css input that loads the vuetify styles breaks the build.

[SergkeiM]

Hi @Kapcash

having same issue, for now downgrading to 0.17 solves the issue.

[asrori7]

Hi, any update for this issue ?

[cesxhin]

hi! same problem, news?

[userquin]

https://nuxt.vuetifyjs.com/guide/sass-customization.html#overriding-sass-variables

[userquin]

iirc, you must disable vuetify/styles if you want to override component variables, otherwise you need vuetify/styles: disableVuetifyStyles just prevents the module to add the vuetify/styles to nuxt css entry

[Kapcash]

https://nuxt.vuetifyjs.com/guide/sass-customization.html#overriding-sass-variables

This is the documentation I followed to set this up, yes 😄 But I still have this issue.

I understand disableVuetifyStyles is needed to avoid a double import of the vuetify styles, since we import it via the css: ['./assets/styles/vuetify-globals.scss'], option.

But then, to override the component's styles using vuetify-components.scss file, is there any additional configuration needed? It does work, but only on client side.

---

If you find some time for this, could you please try to fix my stackblitz reproduction so we can see the actual working configuration? 🙏

[userquin]

I need to review the custom plugin, maybe some change at Nuxt.

I will try using @unvuetify/styles-plugin...

/cc @TechAkayy

[userquin]

The styles are missing only with dev server, if you run build + preview the styles are fine: add vuetifyOptions: { labsComponents: true } in your nuxt config file, a lot of changes since Nov 25.

Some changes here (using vuetify 3.7.11, Nuxt <3.16.0 using unhead v1, Vuetify >3.7.11 using unhead v2: using latest module version): https://stackblitz.com/edit/github-6wavaj-wae1sac9?file=package.json,nuxt.config.ts,components%2FVuetifyTest.vue

Just run npm run build && npm run preview

[cesxhin]

Is there any news that styles can also work in ssr?

[zweeen]

Is there any news that styles can also work in ssr?

Up please 🙂 🙏🏼 @johnleider @KaelWD @MajesticPotatoe

[johnleider]

Is there any news that styles can also work in ssr?

Up please 🙂 🙏🏼 @johnleider @KaelWD @MajesticPotatoe

The resident NUXT expert in Vuetify is already replying in this thread; @userquin

[userquin]

Sorry for the late response, will try to resume vuetify nuxt module work in a few days, too busy at work last 4 months :pray: too many (breaking) changes at Nuxt and Vuetify