In the Vue Vite project, I have a folder structure like this

The problem is that vite cannot detect changes (ctrl s) in A.vue or B.vue, i.e. components nested under NestedFolder in the component folder. Everything else works fine.

My vite.config.js looks like this,

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@public': fileURLToPath(new URL('./public', import.meta.url)) } }, server: { proxy: { '/api': { target: 'XXX', changeOrigin: true, secure: false, ws: true, } } } })

I've tried following the vite HMR API documentation with a custom HMR function and having it send a full reload using it.

... plugins: [ vue(), { name: 'custom-hmr', enforce: 'post', // HMR handleHotUpdate({ file, server }) { if (file.endsWith('.vue')) { console.log('reloading json file...'); server.ws.send({ type: 'reload', path: '*' }); } }, } ], ...

I looked at vite's HMR API documentation but don't know how to send update events to vite when using a custom hmr function

Any help/advice on how to resolve this issue would be greatly appreciated.