HMR not working in `layers` in v4
I recently updated to Nuxt v4 and realized that my HMR broke within my layers.
I heavily use the layers feature to organize my project by domain.
I extend each layer in the root
nuxt.config.ts , for example:
Everything works perfectly except for HMR - any ideas?
21 Replies
Hi @Bobakanoosh. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There have been several improvements and fixes related to HMR (Hot Module Replacement) in Nuxt v4, especially around layers. However, some users have reported issues with HMR not working as expected within layers after upgrading to v4.
Based on the knowledge sources:
- Nuxt v4 has made significant changes to how layers and their modules are loaded, including correcting the module loading order and improving HMR for templates, pages, and page metadata. These changes should generally improve HMR reliability in layered setups Corrected Module Loading Order in Layers.
- There have been recent PRs specifically addressing HMR for templates, pages, and page metadata, as well as fixes for router HMR and app config HMR fix(nuxt,vite): support hmr for templates, pages and page metadata, fix(nuxt): use fullPath instead of empty string in router hmr, fix(nuxt): delete existing properties on app config template's HMR.
- If your layers are installed as dependencies (e.g., from node_modules), there are known issues with alias resolution and HMR. Workarounds exist for some problems, but not all. For example, Vite may treat layer aliases as external dependencies, and the Vue compiler may not resolve them correctly. This is especially true if your layer ships with a tsconfig.json that points to non-existent configs Layer aliases not resolving, when it is installed as dependency.
- If your layers are local (e.g., in a ./layers directory), ensure they are structured correctly and that you are not placing the layers folder inside the app folder, as this can affect layer resolution and order Order of layers in Nuxt 4 is different if the layers folder is not in the app folder.
What you can try:
1. Ensure you are on the latest Nuxt v4 version, as many HMR and layer-related bugs have been fixed in recent releases.
2. Check your layer structure: Place your layers in a top-level ./layers directory, not inside the app folder.
3. If using TypeScript, avoid shipping a tsconfig.json in your layer unless necessary, as it can interfere with alias resolution and HMR.
4. If your layers are dependencies (in node_modules), be aware that HMR and aliasing may not work perfectly due to current limitations.
5. If you are still experiencing issues, check the Nuxt GitHub issues and PRs for recent fixes or workarounds, as this area is actively being improved.
If after these steps HMR is still not working in your layers, it may be due to an unresolved bug or a specific project setup issue. In that case, consider creating a minimal reproduction and reporting it on the Nuxt GitHub repository for further assistance.
Summary:
HMR in layers should work in Nuxt v4, but there are known edge cases and recent fixes. Make sure your setup matches the recommended structure and keep Nuxt updated. If issues persist, it may be a current limitation or bug fix(nuxt,vite): support hmr for templates, pages and page metadata, Layer aliases not resolving, when it is installed as dependency. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
HMR in layers should work in Nuxt v4, but there are known edge cases and recent fixes. Make sure your setup matches the recommended structure and keep Nuxt updated. If issues persist, it may be a current limitation or bug fix(nuxt,vite): support hmr for templates, pages and page metadata, Layer aliases not resolving, when it is installed as dependency. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@193115930857832448> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Interestingly if I use the component in
app.vue, hot reloading then works for any other usage of it anywhere in the component tree. But if its not in app.vue, it doesn't.did you find a solution to this?
I thought I did several times but it never sticks :/
Do you use nuxt ui in your project?
Yeah
is there a bug with it?
Will try to narrow it down more tomorrow, but I went back a few commits and going from
nuxt
^3.19.1 -> ^4.1.2
and @nuxt-ui/pro ^3.2.0 -> ^3.3.3 broke itfor my part it was first the tailwind utilities which did not work in the layers
I had to use @source in tailwind.css but nuxt's hmr doesn't work anymore
I’ve had the source issue before I think I have @source but will double check
In my case I was just adding text to a component in the layer though
I had this solution on this issue but so far nothing on the hmr https://github.com/nuxt/ui/issues/3374
GitHub
Tailwind CSS 4.0.8 not loading correctly · Issue #3374 · nuxt/ui
Environment Mac OS Node version v20.18.1 Nuxt v3.15.4 Is this bug related to Nuxt or Vue? Nuxt Version v3.0.0-alpha13 Reproduction follow installation from guide: npx nuxi init -t ui3 start: npm ru...
Just crazy I can’t find anyone else (except you) having the problem
You can create an issue in nuxt repository
Haven’t been able to get a minimal repro so
working on it but it’s just something so specific it’s really hard to pin down
I will also try on my side
somewhere in here...
Nuxt
v3.18 broke it
Getting a lot more narrowed, its actually @source "../../../layers/"; on nuxt@3.18.0GitHub
GitHub - Bobakanoosh/layers-hmr-bug
Contribute to Bobakanoosh/layers-hmr-bug development by creating an account on GitHub.
GitHub
HMR broke in v3.18.0 when using TailwindCSS + Layers · Issue #3326...
Environment Operating System: Windows_NT Node Version: v22.14.0 Nuxt Version: 3.17.7 CLI Version: 3.28.0 Nitro Version: 2.12.6 Package Manager: pnpm@10.12.4 Builder: - User Config: extends, telemet...
Great , I have a question for you? Have you ever encountered this bug? https://github.com/nuxt/ui/issues/4666
GitHub
Nuxt UI v2 triggers full page reload on file changes when used as N...
Environment Operating System: Windows 11 Node Version: 22.17.1 Nuxt Version: 3.17.0 @nuxt/ui Version: 2.22.0 Package Manager: pnpm@9.9.0 or yarn@1.22.22 Is this bug related to Nuxt or Vue? Nuxt Ver...
No unfortunately - never used v2
Thanks