Nuxt 3.16.0 causes theme issues with future compatibilityVersion 4

[mcfarljw]

Not sure if it's a bug with the recent Nuxt 3.16.0 release or not but when using the following nuxt.config.ts it doesn't seem to load the theme properly. When reverting to Nuxt 3.15.4 it works as expected.

• Button should probably be a different color
• Background should definitely not be that color

https://stackblitz.com/edit/nuxt-starter-g1g4t2mx?file=package.json,nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: false },
  future: {
    compatibilityVersion: 4,
  },
  modules: ['vuetify-nuxt-module'],
  ssr: false,
  vuetify: {
    vuetifyOptions: {
      theme: {
        defaultTheme: 'light',
        themes: {
          light: {
            dark: false,
            colors: {
              background: '#800080',
            },
          },
        },
      },
    },
  },
});

[userquin]

Looks like something broken at Nuxt or Vite unhead, check screenshots below:

• 3.15.4 => <style id="vuetify-theme-styles">...</style>
• 3.16.0 => <style children=":root...."

Using Nuxt 3.16.0 with your reproduction:

Using Nuxt 3.15.4:

[userquin]

Looks like some changes in unhead, we need to replace children with contentText when adding content to style at Vuetify:
https://unhead-unjs-io.nuxt.dev/docs/guides/inner-content#inner-content

https://stackblitz.com/edit/nuxt-starter-nyqn1gth?file=nuxt.config.ts,modules%2Fvuetify-theme.ts

Just add the module in the reproduction.

[mcfarljw]

Nice detective work, I can verify that patching the module composable gets things working again.

[userquin]

We can enable unhead options in our nuxt config file instead using previous nuxt module, check unhead migration documentation:

  unhead: {
    legacy: true,
    renderSSRHeadOptions: {
      omitLineBreaks: false,
    }
  },

[Q16solver]

@userquin Will there be a nuxt 3.16 compatible version in the future for vuetify-nuxt-module? Or do we need to always enable legacy and disable omitLineBreaks (not sure why this one is needed)?

[userquin]

All dependencies at nuxt are updated via renovate, there should be a new release soon.

About the line breaks flags, I just set that value since the ssr option is required.

If you dont want unhead legacy, you can use resolutions or pnpm.overrides to update unhead and unhead/vue to v2 rc.10.

[userquin]

@mcfarljw @Q16solver PR sent to Vuetify to fix the problem