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:
📺 Migrate to Nuxt 4 NOW?! • Migrate to Nuxt 4 NOW!?
📺 Dynamic Rendering in Nuxt • Dynamic Components in Vue
📺 A plain SPA with Nuxt! • Building a plain SPA w...
📺 Nuxt vs Nitro • Nuxt vs. Nitro - What ...
🔗 Modules folder in Nuxt 3 nuxt.com/docs/guide/directory...
🔗 Migrating to Nuxt 4 Guide (Docs) nuxt.com/docs/getting-started...
📺 Nuxt Layers Guide • How to use Nuxt Layers...
📺 ‪@DejaVueFm‬ #013 - The Road to Nuxt 4 (with ‪@danielroe‬) - • DejaVue #E013 - The Ro...
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
---
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 Direcotry Strucutre 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!🎉

[@TheAlexLichter]

Of course, you are welcome 🙏🏻 Thank you for your enduring support 🙌🏻

[@thetakburger7928]

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

[@TheAlexLichter]

You're welcome! ☺️

[@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.

[@TheAlexLichter]

You are welcome! The only „overlap“ is SSRing your Nuxt app IMO but it is tricky to incorporate that in the name ☺️

[@EvestDev]

I would be interested in a nuxt subdomain video :)

[@esorribas]

☝

[@Berk45632]

YES! I am starting a big project entirely in Nuxt + Nitro. Deadline is January 2025. And there are 4 subdomain websites to build and I would really love a subdomain tutorial.

[@TheAlexLichter]

Okay folks! Added to the list of topics 👌🏻

[@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...

[@chstappert]

And wahts about a "pateches" folder?

[@TheAlexLichter]

Patches as project-specific and stays top-level

[@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

[@TheAlexLichter]

I might make a video on it in the future! Definitely possible to use layers in a monorepo (that’s a common thing at the moment)

[@Kingside88]

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

[@TheAlexLichter]

Yes but then you limit layers to a certain use case, while they have multiple as discussed in kzbin.info/www/bejne/nKOYqqJplruenKM

[@Kingside88]

@@TheAlexLichter 😀Wir haben die selben Gartenstühle.

[@phip1611]

Great video 🎉

[@TheAlexLichter]

Thank you 🙏🏻

[@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?

[@biLLie_wiLLie]

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

[@TheAlexLichter]

What do you think about the Nuxt 4 changes?

[@mahdimolaei3894]

Shout out to Nuxt 4 🤩🤩🤩🤩🤩🤩

[@TheAlexLichter]

📈📈📈

[@hanes2]

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.

[@TheAlexLichter]

SSR works pretty well in Nuxt IMO but there are some gotchas to figure out “how to render data” and transfer it to the client. I’ve talked about that in kzbin.info/www/bejne/iorcdp2EZbqlnKM and also kzbin.info/www/bejne/mmWQgJ2insiVn7ssi=cyYdvjAVAACi-W-B a bit

[@naveeng2003]

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

[@TheAlexLichter]

kzbin.info/www/bejne/ZpDLi6yjotWIfrM might be the way!

[@naveeng2003]

That looks good, and can we auto import types as well in nuxt and share them

[@businessoftechnology]

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

[@TheAlexLichter]

I think the layers folder is ideal to slice up an app by feature/domain/scope etc It is more for organization at the moment then „integrated apps“. But who knows what’ll come!

[@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/

[@TheAlexLichter]

Should be possible but then you have to manually extend them in the config 👌🏻

[@QueeeeenZ]

@@TheAlexLichter Could you show how? also, it would be nice if each layer could bundle its own server routes like "users" layer should include api routes for "users"

[@TheAlexLichter]

@QueeeeenZ layers can have their own server folder. Extending works like shown in the layers guide (link in description) via “extends” option

[@hvsciverius]

oh God, It feels like Nuxt 3 just released few months ago

[@TheAlexLichter]

While it was more than a year 😱

[@yohannb5910]

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

[@TheAlexLichter]

You might want to do as in kzbin.info/www/bejne/ZpDLi6yjotWIfrM

[@yohannb5910]

@@TheAlexLichter actually to auto import at rootDir, Nitro needs to have root path referenced as 'shared/**' (without slash or .. to start) while Nuxt auto imports need to be relative to the srcDir folder (app folder in Nuxt 4) '../shared/**'. to import recursively, just add /**/**/** as deep as your folder hierarchy.

[@Wojtasvx]

Right! :D

[@TheAlexLichter]

Haha 😛

[@Aguycalledmax]

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

[@TheAlexLichter]

Yea! It still can if you decide to use a BFF (Backend For Frontend). And perf-wise (during dev) you still don’t need to scan node modules, .git and all 👌🏻

[@---dp5vj]

I generally prefer flatter folder structures and organizing by file name.

[@TheAlexLichter]

That’s fine 👌🏻 you can still do so ☺️

[@ElFerBlocks]

I think , if somebody use object oriented programing with type script , a folder is missing . This folder have to be in app folder and it's name classes (app/classes) . I wonder, does somebody use object oriented programing with nuxt?? . May be I one of this guys

[@TheAlexLichter]

It isn’t super popular and I personally don’t. But luckily you can simply create a services / classes / … folder 👌🏻

[@hanes2]

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

[@TheAlexLichter]

As Daniel said 👀 In kzbin.info/www/bejne/jKvQdI2wrZV4oqM

[@Andrey-il8rh]

I wonder how layers order is recognized when no extra config is provided?

[@TheAlexLichter]

Through the layers folder (only). One subfolder in there = 1 layer. So layers/a, layers/b, layers/whatever etc etc

[@Andrey-il8rh]

@@TheAlexLichter I see...so it should be nested to override? Like layers/a/b/c ?

[@TheAlexLichter]

No no. These layers (A, B, whatever) are „siblings“ on the same level but „children“ of your app. So you can override them only in your actual app with components etc. If you want a base layer that a, b and whatever inherit from, the layers folder might not work for that out of the box (so you need to use extends as shown in my layers guide)

[@Andrey-il8rh]

@@TheAlexLichter but my question was about how those layers interact with each other. If I have 3 layers, a, b, c. How will I know which order they will be arranged?

[@TheAlexLichter]

They shouldn’t be order dependent! Otherwise you have a dependency (eg a needs b) and layers folder might not be ideal for that

[@yoskokleng3658]

i check their document, it is still nuxt version 3.12.2

[@TheAlexLichter]

And you can opt into the changes already! Link in the description

[@erxweo]

Have you considered FSD in any way?

[@TheAlexLichter]

Yes! That’s what I’ve shown with /layers! See also kzbin.info/www/bejne/nKOYqqJplruenKM

[@erxweo]

@@TheAlexLichter thank you very much

[@chingizmammadov6270]

Hi Alexander, did you provide paid consultation for engineers?

[@TheAlexLichter]

I do! Feel free to schedule a meeting @ www.lichter.io/

[@xMorthi]

check his website. you can book there

[@chingizmammadov6270]

Thanks guys. Already booked :)

[@Anonymous-jd3zc]

it's slowly turning into Laravel 😆

[@TheAlexLichter]

Which is a good thing, right? 👀

[@Anonymous-jd3zc]

Yes, yes it is 😁 ​@@TheAlexLichter

[@alimaher1]

I'm not really sure about this to be honest. My initial feeling is that it adds more complexity to the project. I understand the whys from the performance pov but other than that I don't see it. Maybe I'd like it once I work with it idk.

[@TheAlexLichter]

Definitely give it a shot! IMO the separation between server and client *really* helps to know the “boundaries” between the nitro-related part and Nuxt

[@randomtimessomehow]

I think these changes are so unnecessary and this is why I almost never update any of my modules. Sure, updates come with useful stuff but there are also lots of things that just cause headaches. We should not forget that our goal as developers is to develop a product that solves a problem/has purpose and not move folders/files around to be compatible with new versions etc. (just my opinion....)

[@TheAlexLichter]

But do you see merit and *why* the Nuxt team introduced the changes? And if you really don’t agree, you can always opt out of the new structure (or not opt into it as shown at first)

[@TheAlexLichter]

Plus, to be fair. Adding one folder and move most of the others inside will take ~5min to migrate, so it isn’t a big effort 👀

[@user-up5qf6cm6w]

Srry but nuxt3 is still better and sexier..

[@TheAlexLichter]

In terms of what? 👀

[@hasanaliyev5231]

Copying another NextJS feature? Nice. What about doing something unique and your own? Do you realise that you are years behind of NextJS, although I don't like neither of NextJS and NuxtJS.

[@TheAlexLichter]

1) Which NextJS features was copied here? Just because the folder name is also app, it doesn’t meant Nuxt has an app router now (hint: it doesn’t) 2) I doubt that Nuxt is years behind NextJS 😁 but I might be biased here. Curious to here from you in what Nuxt is that behind! 3) which framework do you like then? 👀

[@augustusezenwankwo]

Layouts and middleware first came to nuxtjs. If anything, they copy each other, lol.

[@forktrader7870]

i dont like it. its like NextJs but running the vue for templating. fk

[@TheAlexLichter]

Not really. Nuxt has no App router like next. It is simply a separation (which you could’ve done mostly that way in Nuxt 3) Please don’t overdramatize it 😁

[@muzzi1984]

Ok but Nextjs running the React, as well. :)

[@freekeys]

Nuxt 4 please provide cross platform tech at top level so we don't use react native 🥲😂

[@TheAlexLichter]

I *wish* it'd be that easy. But funnily, this will be covered in a soon-to-be-released podcast episode on www.youtube.com/@DejaVueFM with a *very* special guest.

[@freekeys]

@@TheAlexLichter great 🎉