fix: restart v4 compat dev server on config. file changes

package.json

@@ -124,6 +124,7 @@
       "@vuetify/loader-shared",
       "node:child_process",
       "node:fs",
+      "chokidar",
       "consola",
       "destr",
       "esbuild",

src/utils/layers.ts

@@ -1,5 +1,6 @@
 import type { Nuxt } from '@nuxt/schema'
 import defu from 'defu'
+import { normalize } from 'pathe'
 import type { FontIconSet, IconFontName, InlineModuleOptions, VuetifyModuleOptions } from '../types'
 import { loadVuetifyConfiguration } from './config'
 
@@ -42,10 +43,22 @@ export async function mergeVuetifyModules(options: VuetifyModuleOptions, nuxt: N
   // handle vuetify configuraton files changes only in dev mode
   if (nuxt.options.dev && resolvedOptions.sources.length) {
     // we need to restart nuxt dev server when SSR is enabled: vite-node doesn't support HMR in server yet
-    if (nuxt.options.ssr)
-      resolvedOptions.sources.forEach(s => nuxt.options.watch.push(s.replace(/\\/g, '/')))
-    else
-      resolvedOptions.sources.forEach(s => vuetifyConfigurationFilesToWatch.add(s.replace(/\\/g, '/')))
+    if (nuxt.options.ssr) {
+      if (nuxt.options.future?.compatibilityVersion === 4) {
+        if (resolvedOptions.sources.length) {
+          resolvedOptions.sources
+            .map(s => s.replace(/\\/g, '/'))
+            .filter(s => !s.includes('/node_modules/'))
+            .forEach(s => vuetifyConfigurationFilesToWatch.add(s))
+        }
+      }
+      else {
+        resolvedOptions.sources.forEach(s => nuxt.options.watch.push(normalize(s)))
+      }
+    }
+    else {
+      resolvedOptions.sources.forEach(s => vuetifyConfigurationFilesToWatch.add(s))
+    }
   }
 
   // unshift since we need to use the app configuration as base in defu call (L64 below): fix #231

src/utils/loader.ts

@@ -1,9 +1,10 @@
-import { relative, resolve } from 'node:path'
+import { normalize, resolve } from 'node:path'
 import type { Nuxt } from '@nuxt/schema'
 import defu from 'defu'
 import { debounce } from 'perfect-debounce'
-import { addVitePlugin } from '@nuxt/kit'
+import { addVitePlugin, isIgnored } from '@nuxt/kit'
 import type { ModuleNode } from 'vite'
+import { watch as chokidarWatch } from 'chokidar'
 import type { VOptions, VuetifyModuleOptions } from '../types'
 import { RESOLVED_VIRTUAL_MODULES } from '../vite/constants'
 import { mergeVuetifyModules } from './layers'
@@ -82,7 +83,7 @@ export async function load(
   /* handle new stuff */
   ctx.moduleOptions = configuration.moduleOptions!
   ctx.vuetifyOptions = configuration.vuetifyOptions!
-  ctx.vuetifyFilesToWatch = Array.from(vuetifyConfigurationFilesToWatch)
+  ctx.vuetifyFilesToWatch = Array.from(vuetifyConfigurationFilesToWatch).map(f => normalize(f))
   ctx.icons = prepareIcons(ctx.unocss, ctx.logger, vuetifyAppOptions)
   ctx.ssrClientHints = prepareSSRClientHints(nuxt.options.app.baseURL ?? '/', ctx)
 
@@ -105,11 +106,42 @@ export function registerWatcher(options: VuetifyModuleOptions, nuxt: Nuxt, ctx:
   if (nuxt.options.dev) {
     let pageReload: (() => Promise<void>) | undefined
 
-    nuxt.hooks.hook('builder:watch', (_event, path) => {
-      path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path))
-      if (!pageReload && ctx.vuetifyFilesToWatch.includes(path))
-        return nuxt.callHook('restart')
-    })
+    // setup watcher when using compatibilityVersion - files outside srcDir are not watched
+    if (nuxt.options.future?.compatibilityVersion === 4) {
+      const watcher = chokidarWatch(
+        ctx.vuetifyFilesToWatch.map(f => normalize(resolve(nuxt.options.srcDir, f))),
+        {
+          awaitWriteFinish: true,
+          ignoreInitial: true,
+          ignored: [isIgnored, 'node_modules'],
+        },
+      )
+
+      const ssr = nuxt.options.ssr
+      watcher.on('all', (event, path) => nuxt.callHook('builder:watch', event, normalize(path)))
+      nuxt.hook('close', () => watcher?.close())
+      nuxt.hooks.hook('builder:watch', (_event, path) => {
+        path = normalize(path)
+        if (ctx.vuetifyFilesToWatch.includes(path))
+          return !ssr && typeof pageReload === 'function' ? pageReload() : nuxt.callHook('restart')
+      })
+    }
+    else {
+      nuxt.hooks.hook('builder:watch', (_event, path) => {
+        path = normalize(resolve(nuxt.options.srcDir, path))
+        if (!pageReload && ctx.vuetifyFilesToWatch.includes(path))
+          return nuxt.callHook('restart')
+      })
+      // on v4 this is not called
+      addVitePlugin({
+        name: 'vuetify:configuration:watch',
+        enforce: 'pre',
+        handleHotUpdate({ file }) {
+          if (pageReload && ctx.vuetifyFilesToWatch.includes(normalize(file)))
+            return pageReload()
+        },
+      })
+    }
 
     nuxt.hook('vite:serverCreated', (server, { isClient }) => {
       if (!server.ws || !isClient)
@@ -130,14 +162,5 @@ export function registerWatcher(options: VuetifyModuleOptions, nuxt: Nuxt, ctx:
           await Promise.all(modules.map(m => server.reloadModule(m)))
       }, 50, { trailing: false })
     })
-
-    addVitePlugin({
-      name: 'vuetify:configuration:watch',
-      enforce: 'pre',
-      handleHotUpdate({ file }) {
-        if (pageReload && ctx.vuetifyFilesToWatch.includes(file))
-          return pageReload()
-      },
-    })
   }
 }