NEW Folder Structure in Nuxt 4

[@TheAlexLichter]

Also check out the new `shared` folder - kzbin.info/www/bejne/lZ6YlKdrmp2hjNE

[@_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! ☺️

[@chekobil]

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 ☺️

[@kolorartists]

Imho there's a **lot** of documentation needed (and currently missing) regarding the new folder structure. But I can already feel the benefits first hand on a semi-big project I'm currently migrating and especially dev-server startup times have seen significant improvements (went from an unbearable multi-minute journey to juts a few seconds in my case) Things that are imho entirely unclear: - how to handle layers (do layers need to follow the new structure too, where to put local layers, what if layers have local modules or server parts?) - what to do with local modules - where to put shared code and does that have any implications (e.g. shared types between app and server which I'd put into the rootDir?)

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

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

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

[@cailliaud]

Really great video ! I am just curious how will work directory like 'content' from Nuxt Content. Should it be moved to app or it will stay in ?

[@TheAlexLichter]

Content will stay top-level (next to app and server) - see github.com/nuxt/content/pull/2649

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

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

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

[@TheAlexLichter]

1) Yes, it will! 2) How/Why would you want to store it? You could use a computed that's based on it for example. Or a watcher "transferring" the value you want over

[@sven.van.reenen]

Awesome! Yeah never mind my second question 😅

[@linpengteng]

Nuxt4 isn’t out yet, Looking forward to it～

[@TheAlexLichter]

And still isn't. But it will come!

[@layer8problem]

How did u autofill the new component with the empty template

[@TheAlexLichter]

I set up my own snippet for it. Might make a video on that one 👌

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

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

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

[@phip1611]

Great video 🎉

[@TheAlexLichter]

Thank you 🙏🏻

[@linpengteng]

In Nuxt4, the util and plugin defined in ~/app/utils and ~/app/plugins, can they be used in ~/server?

[@TheAlexLichter]

No, you have server/plugins and server/utils for that 👍🏻 Utils is something you can re-export (or store somewhere else if you need shared utils) too :) Also covered in kzbin.info/www/bejne/epzZmH2XYr1mZ80

[@linpengteng]

@@TheAlexLichter thank you!

[@linpengteng]

About @nuxt/content, Is it not possible to use the Vue Component in the ~/app/components/content/ directory?

[@linpengteng]

define it in the ~/components/content directory (when use Nuxt4 )?

[@TheAlexLichter]

Please raise an issue, this should be possible via the app directory 😊

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

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

📈📈📈

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

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

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

[@adel.dev.account]

You look like hans niemen, The American chess grandmaster

[@TheAlexLichter]

But there is way less controversy around me 😛

[@adel.dev.account]

@@TheAlexLichter I like your sense of humor xD

[@TheAlexLichter]

Thanks 🙏🏻🙊

[@---dp5vj]

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

[@TheAlexLichter]

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

[@---dp5vj]

​@@TheAlexLichter This makes perfect sense now. Combined with layers, workspaces, and multi-app functionality in the future, this helps to organize things nicely. Thanks for the video.

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

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

[@hanes2]

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

[@TheAlexLichter]

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

[@cmammadov]

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

[@cmammadov]

Thanks guys. Already booked :)

[@skyhappy]

why use nuxt over sveltekit?

[@TheAlexLichter]

Some points (all are impossible to list): First: Vue vs. Svelte (preference here) Second: Ease of deploying everywhere with Nuxt Third: Nuxt Layers (very unique feature) Fourth: Community

[@skyhappy]

@@TheAlexLichter how is nuxt easier to deploy exactly?

[@TheAlexLichter]

Thanks to Nitro, you can deploy to 20+ platforms, a lot with 0 config, no matter if edge runtime, node, deno, etc. without much effort. As in nitro.unjs.io/deploy

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

[@edgeuplink]

what about .env ?

[@TheAlexLichter]

Stays top-level (like the nuxt config) 👌

[@Anonymous-jd3zc]

it's slowly turning into Laravel 😆

[@TheAlexLichter]

Which is a good thing, right? 👀

[@Anonymous-jd3zc]

Yes, yes it is 😁 ​@@TheAlexLichter

[@Wojtasvx]

Right! :D

[@TheAlexLichter]

Haha 😛

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

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

[@marvenwilsonsdonque1568]

this guy needs to learn how to talk slowly, like its funckin annoying,

[@TheAlexLichter]

"This guy" suggests 0.5x speed then 😁

[@עודדשמואל-ד3ג]

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 🎉