How to use layers in Nuxt 4

[@creative.money_eu]

Please make one more video to explain how this can be useful on a architecture, where multiple projects (deployed on multiple domains) can share a components "layer" with each other. This is a *really* useful feature which other ecosystems dont have to my knowledge and it will surely benefit a lot of people and make Nuxt even more attractive. I subscribed for it, would be amazing

[@chamberlainpi]

This! I have yet to see a tutorial on Nuxt Layers that covers how it can handle multi-sites. At least that's the first thing that comes to mind when I first heard about it, but unfortunately so far it only seems to handle "multiple features" for 1 single site / app.

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

[@AbdulMalikAgzamov]

Thank you so much, been digging with modular architecture in nuxt for a long time and things were getting complicated, but your 5 minute video totally helped me, Subscribe and like from me bro, keep releasing videos!

[@nosmirck]

thanks for the tutorial! I'd like to see how we can use layers to create something like a white label app with most of the functionality and then branded apps that are 99% the same but each one has its own environment. For instance, some kind of shop app with all the functionality to sell products but then one brand sells only shoes and they have different styling while the other sells pants and also has different styling and colors, while the core functionality between both apps remains the same

[@DeveloperNomad]

Can we collab ?

[@MrSonicastra]

Nice, keep them going more Nuxt content the better!

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

[@YellowPanamka]

Nice

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

[@M-lt6kx]

If you create a component/composable/page etc with the same name in a higher layer it will override the existing one.

[@codingwithmartin3177]

Not sure what you mean by that. The idea of Nuxt layers is to "extend" layers not override them. Can you share your use case?

[@yoskokleng3658]

is it better than micro-frontend, right? because it host only with one domain. no headache. hahaha

[@QueeeeenZ]

It depends on the context and goals of the project. Nuxt 3 layers offer a clean, modular approach within a monolithic architecture. Each layer can encapsulate a specific domain or feature, making the codebase more manageable and promoting clear boundaries between different parts of the application. It's ideal for projects where you want to maintain a single application but organize it into smaller, logical modules for scalability and maintainability. Layers provide flexibility, but the application still runs as a cohesive unit. Micro frontends, on the other hand, take modularity a step further by splitting the front-end into multiple independently deployable applications. Each micro frontend can be developed, deployed, and even maintained by different teams, potentially with different tech stacks. This can work well for large-scale, distributed teams or projects where parts of the application need to evolve separately. The choice between the two depends on the scale, team structure, and complexity of your project. For a mid-size project or a project with a unified team, Nuxt 3 layers are likely sufficient, providing a balance between modularity and simplicity. However, for very large projects with independent teams, micro frontends might offer the necessary separation and flexibility, at the cost of added complexity in deployment and coordination. Both approaches have their strengths, but Nuxt 3 layers are better suited for modular monoliths where you want simplicity, maintainability, and clear domain boundaries, while micro frontends are more appropriate when different parts of the application need to be developed and deployed independently by separate teams.

[@QueeeeenZ]

The truth is, micro-frontends are a tool - and like any tool, they're not universally better or worse. They're just suited for different situations. if your project is perfectly manageable with your current approach, then there’s absolutely no need to introduce unnecessary complexity

[@yoskokleng3658]

@@QueeeeenZ Yes, that's why I would say this is awesome and a perfect solution for my situation right now (no headache, save cost,etc). Why? Because Nuxt allows for separation of layers. For example, if I'm building a SaaS platform with modules like Inventory, HR, Accounting, etc., I can create separate layers in Nuxt for each module by organizing them into individual folders named Accounting, HR, and so on. For now, since I'm developing alone, this structure works perfectly. In the future, when we have a team, we can simply copy each folder and share them with the respective teams. It’s convenient because each layer already contains its own structure (composables, pages, utils, etc.). Then, we can implement micro-frontend architecture, and it’s all set. correct me if i am wrong.

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

[@M-lt6kx]

In simple terms, your final app will be all your layers merged together. The end result might be your 'top layer' app using components/utilities provided in some lower layers or like in the video an app where pages and their functionality are separated via layers and merged to create an app with multiple pages.

[@nyambe]

@@M-lt6kx I understand what you are talking about but I thought layers was something else. I have a ui layer that other Nuxt installations can use. Pnpm monorepo manages all layers. That is how they worked in Nuxt 3. Maybe they are ditching this concept

[@codingwithmartin3177]

​ @nyambe Layers can be used for multiple purposes. Yes, one way is to share them among projects. But they cal also be used to implement a DDD/modular architecture. Take a look at the official docs.

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

[@M-lt6kx]

Your layers can be anywhere. In any folder locally, in an npm package or in another git repo. Any of the supported package managers will allow this.

[@yoskokleng3658]

@@M-lt6kx and how about how to build (SPA) ? how the main app (npm run build) know or working with those app? because when we deploy, we just deploy build folder of main app. how ? no one talking about how to build. everyone talk only for development.

[@M-lt6kx]

@@yoskokleng3658 your main app build folder will have everything it needs to run. The build process will grab the layers from wherever they and incorporate them into a single built application. Setup some dummy apps on your machine and have a try.

[@alexanderkim7241]

Not released yet, and won't be during this year 99% :D

What are you talking about? This is the pages feature, layers are another thing

[@QueeeeenZ]

What are you talking about? Did you watch the whole video?

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

[@yoskokleng3658]

@@QueeeeenZ when they release micro frontends. i would use it for my big app.

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

[@codingwithmartin3177]

Why do you care what JavaScript devs do?

[@nonefvnfvnjnjnjevjenjvonej3384]

@@codingwithmartin3177 i like technology as a whole. dont want my bethrens suffering