NEW Folder Structure in Nuxt 4

📂Nuxt's folder structure is well-known to everyone using the meta framework. But in Nuxt 4, it will be slightly changed. In this video, you'll learn how the change looks like, why the team decided to change the structure and how to easily migrate over. So easy, that it'll be done in just a couple of minutes

Don't believe me? Then tune in now! 👀

---
Key points:

4️⃣ Why the new folder structure?
✨ How to migrate to the new folder structure easily
⚙️ What does it improve?
‼️ Migration in the video

---

Links:

Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!

🌐 Connect further:

---

Chapters:

00:00 Intro
00:22 Don't be Afraid of the Nuxt 4 Migration
00:44 The new Directory Structure
01:17 Demo App Overview
01:37 Are we on the latest Nuxt Version?
02:03 Opting into Nuxt 4 Changes
02:27 No errors?
02:57 Migrating to the New Structure
03:52 Directory Structure RFC
04:26 Renaming the app folder (srcDir)
05:33 Why having Separate app and server Folders?
07:38 Other top-level folders
08:35 The modules folder
08:57 The layers folder
11:12 Checking the Upgrade Guide
12:00 Existing app folder?
14:07 Imports with the new structure
15:08 Summary

[_fntn]

The new changes look great to me. I'm enjoying the greater separation of concern between the front and back ends, but I'm particularly looking forward to the greater emphasis on layers. I personally subscribe to the "atomic" design pattern philosophy and I also prefer to build my own UI components from scratch. This often leads to generic/reusable components (text inputs, buttons etc.), which then become part of larger components (custom forms, page sections etc.) that are more custom and project-specific. Modules are a little abstract for my tastes, but layers are a perfect way to separate these two "types" of component from each other whilst still keeping them tightly coupled.

[Tarabass]

This makes sense perfectly. I like it.

Thx for the videos about nuxt 4!🎉

[thetakburger]

I do like the new directory structure. Thank you for the video!

[elnidomusic]

Awesome, thanks for the video ... I think it makes total sense, the server part inside the server folder and the client part inside app folder.

[chstappert]

Waited for this one. Great vid again! P.S.: Don't forget to change the 3 in the background.... ;-) Looking forward to the release...

[EvestDev]

I would be interested in a nuxt subdomain video :)

[realfranciscohermida]

Would be great to see more content considering monorepos in the future, it is great that nuxt is already it's own kind of monorepo with layers, server and app folders, but there are some existing messy projects that have separate backend apis (with trpc for example) or shared ui packages that would be interesting to see how you would structure with a new nuxt app

[ClausStraube]

Thank you for this and the other vids 😍

I understood layers are good for sharing and reusing partial Nuxt applications within a monorepo. But in the new structure, we have a folder layer inside a single (?) Nuxt application. That makes sharing a lot harder or impossible, I guess. Is there a way to define more than one "app" like folder, or how can I reuse layers in that scenario? Or what's you solution for that problem?

Thanks in advance.

[Kingside]

Great! But instead of "layer" I wish they would call it "features". Because I think the "vertical slice architecture" would also make sense in nuxt

[naveeng]

Hey Alexander, can you suggest the best practices for shared utils and types between nuxt and Nitro parts

[sven.van.reenen]

Question! Great video btw if i créate a layer folder will it work out of the box with this new update?

Question two haha
If i have an object in My api response can i store it as ref even when the rest is shallowref?

[hanes]

Nuxt overall been making great improvements. Tho the only downside I experience been SSR. Maybe it's more to blame Nitro or Node in general as in the past I generally don't use JS back-end but often more so Go or Python, but when I tried Nuxt/Nitro, it would introduce quite a lot of issues with hydration which was annoying to deal with, and on top it would use so much more resources on the server so i just set SSR: false and it's the most solid.

[QueeeeenZ]

Hey Alex, thanks for the video. Is it possible to have flat layers structure without having the extra "layers" directory like this for a cleaner look? I would like to put my layers directly inside /app directory without an extra "layers" directory.

/app/
- users/
- settings/
- sales/
- auth/

[businessoftechnology]

This makes me wonder if layers will allow a more nested or integrated App like experience. :)

[biLLie_wiLLie]

I like file structure in nuxt 3. It seems good for me

[Aguycalledmax]

If our nuxt apps do not use nitro server and instead use an external api, does this new folder structure provide any benefit?

[MarcoVerheul-uq]

Hi Alexander, thanks for the video. One thing is not clear to me. In Nuxt 3 you need PNPM workspace to run multiple apps sharing a single layer (for reusable components etc.). Does Nuxt 4 support this natively? And if yes, how is it supposed to work? It seems in your example that you use one layer with one app and that seems a bit unnecessary.

[yohannb]

C an we auto import at the root level to share functionalities like validation schema for example ? in Nuxt auto imports are handled separately for Nuxt and Nitro, Nitro auto imports do not work out of the server folder

[layerproblem]

How did u autofill the new component with the empty template

[hanes]

Anyone know the official release date/month of Nuxt 4?