From ed37f0d7c4724c1d1ea455efe23b7bc7f9c5363b Mon Sep 17 00:00:00 2001 From: userquin Date: Tue, 27 Aug 2024 19:43:47 +0200 Subject: [PATCH] chore: disable inlineStyles when SSR enabled --- docs/guide/server-side-rendering.md | 4 ++++ src/utils/configure-nuxt.ts | 15 ++++++++++++++- src/utils/configure-vite.ts | 2 +- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md index 8ad8b96..4dd9fa6 100644 --- 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 index b08586d..2f2e725 100644 --- 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 index d468fdb..4590f61 100644 --- 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)