chore: disable inlineStyles when SSR enabled

vuetifyjs · Aug 27, 2024 · ed37f0d · ed37f0d
1 parent eaed237
commit ed37f0d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
@@ -19,6 +19,10 @@ The [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client
 
 ## Vuetify SASS Variables
 
+::: tip
+From version `v0.18.0`, when SSR is enabled the module will disable `features.inlineStyles / experimental.inlineSSRStyles`.
+:::
+
 If you are customising Vuetify SASS Variables via [configFile](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#customising-variables) module option with SSR enabled, you have to disable `features.inlineStyles` (`experimental.inlineSSRStyles` for Nuxt version prior to `3.9.0`) in your Nuxt config file, otherwise you will get an error when building your application:
 ```ts
 // Nuxt config file

diff --git a/src/utils/configure-nuxt.ts b/src/utils/configure-nuxt.ts
@@ -1,5 +1,5 @@
 import type { Nuxt } from '@nuxt/schema'
-import { addImports, addPlugin, extendWebpackConfig } from '@nuxt/kit'
+import { addImports, addPlugin, extendWebpackConfig, getNuxtVersion } from '@nuxt/kit'
 import { RESOLVED_VIRTUAL_MODULES } from '../vite/constants'
 import type { VuetifyNuxtContext } from './config'
 import { addVuetifyNuxtPlugins } from './vuetify-nuxt-plugins'
@@ -11,12 +11,25 @@ export function configureNuxt(
   ctx: VuetifyNuxtContext,
 ) {
   const {
+    styles,
     importComposables,
     prefixComposables,
   } = ctx.moduleOptions
 
   const runtimeDir = ctx.resolver.resolve('./runtime')
 
+  // disable inline styles when SSR enabled
+  if (ctx.isSSR && !!styles && typeof styles === 'object') {
+    const [major, minor] = getNuxtVersion(nuxt).split('.')
+      .map((v: string) => v.includes('-') ? v.split('-')[0] : v)
+      .map(v => Number.parseInt(v))
+    const features = major > 3 || (major === 3 && minor >= 9)
+    if (features)
+      nuxt.options.features.inlineStyles = false
+    else
+      (nuxt.options.experimental as any)['inlineSSRStyles'] = false
+  }
+
   // transpile always vuetify and runtime folder
   nuxt.options.build.transpile.push(configKey)
   nuxt.options.build.transpile.push(runtimeDir)

diff --git a/src/utils/configure-vite.ts b/src/utils/configure-vite.ts
@@ -20,7 +20,7 @@ export function configureVite(configKey: string, nuxt: Nuxt, ctx: VuetifyNuxtCon
 
     viteInlineConfig.optimizeDeps = defu(viteInlineConfig.optimizeDeps, { exclude: ['vuetify'] })
 
-    if (nuxt.options.ssr) {
+    if (ctx.isSSR) {
       viteInlineConfig.ssr ||= {}
       viteInlineConfig.ssr.noExternal = [
         ...(Array.isArray(viteInlineConfig.ssr.noExternal)