feat(vuetify-nuxt-module): add experimental cache for vuetify styles in dev

AndreyYolkin · AndreyYolkin · commit 034fd3a4aa87 · 2026-03-04T22:16:06.000+01:00
Enable caching for processed Vuetify SCSS files during development to improve rebuild performance. The cache is automatically invalidated when relevant SASS/SCSS files change.
diff --git a/apps/playground/nuxt.config.ts b/apps/playground/nuxt.config.ts
@@ -46,7 +46,7 @@ export default defineNuxtConfig({
         },
         viewportSize: true,
       },
-      styles: { configFile: '~/assets/custom-vuetify.scss' },
+      styles: { configFile: '~/assets/custom-vuetify.scss', experimental: { cache: true } },
     },
   },
   vite: {
diff --git a/packages/vuetify-nuxt-module/src/types.ts b/packages/vuetify-nuxt-module/src/types.ts
@@ -255,6 +255,9 @@ export interface MOptions {
      * Path to the custom Vuetify SASS configuration file.
      */
     configFile: string
+    experimental?: {
+      cache?: boolean
+    }
   } | {
     /**
      * Include the standard colors palette?
diff --git a/packages/vuetify-nuxt-module/src/vite/vuetify-styles-plugin.ts b/packages/vuetify-nuxt-module/src/vite/vuetify-styles-plugin.ts
@@ -16,9 +16,10 @@ export function vuetifyStylesPlugin (
   _logger: ReturnType<typeof import('@nuxt/kit')['useLogger']>,
 ) {
   let configFile: string | undefined
-  // let cacheDir: string | undefined
+  let useLoadCache = false
   const vuetifyBase = resolveVuetifyBase()
   const noneFiles = new Set<string>()
+  const loadCache = new Map<string, { code: string, map: { mappings: string } }>()
   let isNone = false
   let sassVariables = false
   let fileImport = false
@@ -36,6 +37,7 @@ export function vuetifyStylesPlugin (
 
       if (isObject(options.styles) && 'configFile' in options.styles) {
         sassVariables = true
+        useLoadCache = !config.isProduction && !!options.styles.experimental?.cache
         // use file import when vite version > 5.4.2
         // check https://github.com/vitejs/vite/pull/17909
         fileImport = semver.gt(viteVersion, '5.4.2')
@@ -88,17 +90,41 @@ export function vuetifyStylesPlugin (
               : undefined)
 
         if (target) {
+          if (useLoadCache) {
+            const cached = loadCache.get(id)
+            if (cached) {
+              return cached
+            }
+          }
           const suffix = /\.scss/.test(target) ? ';\n' : '\n'
-          return {
+          const result = {
             code: `@use "${configFile}"${suffix}@use "${fileImport ? pathToFileURL(target).href : normalizePath(target)}"${suffix}`,
             map: {
               mappings: '',
             },
           }
+          if (useLoadCache) {
+            loadCache.set(id, result)
+          }
+          return result
         }
       }
       return isNone && noneFiles.has(id) ? '' : undefined
     },
+    handleHotUpdate ({ file }) {
+      if (!useLoadCache) {
+        return
+      }
+
+      const normalizedFile = normalizePath(file)
+      if (
+        normalizedFile === normalizePath(configFile || '')
+        || normalizedFile.endsWith('.sass')
+        || normalizedFile.endsWith('.scss')
+      ) {
+        loadCache.clear()
+      }
+    },
   }
 }
 
