How to use layers in Nuxt 4

Nuxt 4 is almost out and in this video we take a look at how to use layers in the upcoming Nuxt 4.

[@Joan-kr1jo]

Oh makes sense with the new folder structure. I was trying to create a new project and when I did enable the compatibility version my app broke because didn't have the app folder. Thank you.

[@michaelpeters9551]

This is all really interesting.. how could we have a base collection of these global files and then have these layers override those global components? Does one layer's components override a layer higher up in the tree? If we can achieve this with layers then this is really exciting

[@viesturs.knopkens]

Sounds like a very useful feature, that you can have different config files for each layer. Although I have to think about a little bit when in real life I would use that - e.g. one layer uses Pinia, one Vuex? Or one Bootstrap, but another Tailwind? 😊 But in general I like the idea 🙂👍

[@QueeeeenZ]

Layers is more about grouping your app into logical units like "users", "settings", "sales", "blog", "auth" etc. So you can work on your "settings" feature and find all files related to settings in that layer. This is especially useful in larger apps with bigger teams where one team or developer might work on settings feature, another developer can work on users etc. without conflicts. It also gives the app nice, clean structure.

[@viesturs.knopkens]

@@QueeeeenZ Yes, I understand the layers concept and agree with you, but my comment was meant more on "each layer can have its own config" - I was wondering how often in real life I would need a different config file for each layer :) But I don't insist that there aren't use cases for that, especially for large apps :)

[@QueeeeenZ]

Oh, I see what you mean. I have created large scale apps with layers and I have never needed to specify a different config for each layer. The only difference between layer configs was to specify where to find imports, components etc. because it's a different directory for each layer.

[@overnightmares]

is it ok to have layers outside the "my-app" folder? Imagine I have 2 apps: app1 and app2. Both share some common functionality. Can I have a structure like /layers/ , /app1/ , /app2/ ? And do I need pnpm to make this work or any package manager would do it? Thanks.

[@nyambe]

I thought layers in Nuxt meant a different thing. Layers allows you to share components with other installations, we are not talking about the same thing. Correct?

[@ayushmanbt]

this awfully reminds me of django and the apps concept

[@QueeeeenZ]

Nuxt also has an upcoming multi-app feature which is for micro frontends. But layers is simply a way to group your monorepo app into logical features and it's completely optional.

[@nonefvnfvnjnjnjevjenjvonej3384]

just pointless meanderings in the javascript land. they keep changing things for no reason. instead they should selectively ignore things not being changed such as node modules... i dont know why javascript devs lap it up...