@@TheAlexLichter Its absolutely mighty especially for multiple frontends/applications which do rely on the same auth or UI & do have a need of whitelabeling them.
it reminds me about the nestJS (backend) module dependency injection ... but here's at nuxt we have all-in-one solution (front - backend) without any complications ... you can separate/attach to Monolithic/Modulare or Domain Driven Design/Microservice ... amazing ... keep going man 🚀
Great video! I am currently building a larger application and splitted it up into a db, base, studio (my backend) and web app. The web app and my backend both extend the db and base layer. If I would now build another high level app like a marketing site, I could extend the base layer but maybe not the db, because it’s not needed. Awesome stuff!
Thanks for this video! I see this at the right time 💪💪 especially the thing you mentioned about the aliases, I have been running into this issue. Thanks! 🙏
Super Einführungsvideo! Wie wärs mit einem zweiten Video in den du tiefer gehst und gerne auch Dinge beleuchtest, die nicht dokumentiert sind? Wie dem Deployment von Layers (mit Monorepo) oder erklärst, welche nuxt oder node modules wann welchen Layers zur Verfügung stehen? (daran scheitere ich ehrlich gesagt gerade, da ich mein Prismic slice machine setup gerne in nen Layer) extrahieren möchte, dies jedoch nicht funktioniert)
Ist in meiner TODO-Liste aber braucht etwas Zeit zum vorbereiten ☺️ Bzgl. welche module wann zur verfügung stehen: Alle Module der "niedrigeren" Layer (also im extends, und deren extends layer) stehen dem höheren Layer zur verfügung!
Could have been a chair stream video, didn't have to stress so much to get back! 😉 In all seriousness, it was a good introduction to what layers are about. I feel like the topic could benefit from expanding into layer configuration when consuming them from the app, for example having a setting to change the "base" or "layer-two" label inside the component from the settings instead of overriding. This would certainly be required when adding something like the auth layer example. I've also seen layers used for component libraries, but when using them together with Tailwind I find it confusing to know how those settings can be combined with consuming layers. I also assume that if a layer installs a package, the consuming app doesn't need to install it as a dependency? In any case, thanks for the video as always!
Haha, next time maybe 😛 With regards to the content: Yes, there are quite some missing points - app config, integration with modules, dep tracking etc. I'm planning separate videos for these 👍🏻
Great work with your channel Alexander. I would love to see an example implementation of layers using a private github repository as the source layer. I keep hearing how it's possible but I have not managed to successfully implement it and I see a lot of other people having similar issues in this scenario.
Hi Alex. Really a nice beginner's video on the subject. I really like the concept of the layers. Could you perhaps make a follow-up video and go into more detail? What would interest me personally would be whether it is possible to import the layers in a separate namespace. What if I import several layers that use the same component name (e.g. button or dialogue etc.). I might even want to use both of the components in my main application. Couldn't find anything about this in the documentation.
Thank you 🙏🏻 Might do a follow-up video later this year, yes 👍🏻 If two (sibling) layer expose a component with the same name, then it depends on the order of the layer. Ideally the names should diverge so you can use both ☺️ If layer a extends layer b (so app -> a -> b), then that's also the order of priority. App overrides all, a overrides b when the expose a component with the same name.
We're using Nuxt Layers to enable Domain Driven Development: Each team has their own layer working on different features. We also have a main layer that combines all domains into a single application. Doesn't seem like the example use case for Nuxt Layers, but after tweaking it a bit it works suprisingly well. We only use the overriding feature for on edge case, but it's effectively just separating our code really well: Team A cannot just use Team B's component/store. They have to meet somewhere in the main layer to communicate, which keeps the domain code really inside each domain. What do you think about using Layers like this?
Yes, absolutely! This is one of the cases I tried showing with the 2nd example (auth layer / search layer / ...) but with different scopes. Layers are definitely the way for DDD ☺️
@@forktrader7870 We are doing it like this: Every layer has pinia stores, components, composables that are relevant for that domain. All the query/fetch logic is inside the layer. If you have a page with multiple domains, we just put the page inside the main layer and just call the layer stores there and fetch data. Then we pass it to the component of the layer. You can also define the a new component inside the layer with the fetch and store calls and just use this component then in the main layer page. As long as no other component needs the store, this works well and keeps it domain-driven.
@@forktrader7870 I am using pinia for the stores and each layer has it's own stores. If you have a page that is only using components and stores from its own layer, you can put all the code in that layer, including whole crud operations. If you have a page that is using multiple layers, you should put this page in the main layer. There you could either use the layer components or call layer stores also. Just make sure all your domain code is actually in the layer. Use slots if you need to put a layer component inside another layers component. Only put pages on main layer if necessary. I also have a base layer which all layers extend. E.g. here are all design system components and also the user store, since all layers should have access to it. So i have: 1 base layer multiple domain layers (extend base only) 1 main layer (extend all)
It's so nice to have layers built in directly into the framework. Previously with Nuxt 2, we used to build custom modules to get a similar developer experience in isolating different logical features of the application. The component overrides are also a very nice feature to have. However, do you have any recommendations as to how should one use layers to override components partially? For example, let's say I built a component that includes many functions and a template that fits all but one of my 10 applications. Let's say that the only thing I need to change is the template part. If I were to now override the component, I would also need to include the script part, even if it hasn't changed. Even though I haven't tried it yet, it seems to me that it would be possible to "override" the component by: 1) Using slots in the original component 2) Overriding it in the application by using the same component name 3) In the new component manually import the original component from the layer 4) Use the original component in the template and override the slots Would that work or is there an even better way? :)
In that example i would personally recommend to use your utils or composables folder to separate your functions and just use them in the component you want it to be. If I am not wrong @TheAlexLichter all folders are passed through layers correct
@svenvanreenen Not all folders, but the "typical ones", unless defined otherwise (so composables and utils do, yes). @uplaymedia With regards to "partial overrides": I'd try using slots indeed and build as many "dumb"/"presentational" components as possible and use these + override them when necessary. But it depends on the case
Thanks for the video! Does this feature suit for using some common base components which we build for projects (inputs, dialogs etc) in new apps (to not to copy paste it) or there is a better approach for this case
Hi there! Alongside Nuxt layers, can you help us understand how to use Nx with Nuxt3? I am facing many issues with it right now and I'd love for a brief tutorial on it. Thanks!
This looks wonderful & working, but is this already outdated? There’s mention in the docs about some “layers” folder that helps “detect” these nested projects automatically…so is this the newer way to achieve the same thing explained here? The docs also don’t seem to mention anything about setting up the pnpm-workspace.yaml file, is that no longer necessary?
The layers folder is a way to make it easier to use layers - especially if you want to slice up your app, so you don’t necessarily need a more complex Setup. For whitelabeling and sharing base parts I’d still recommend this approach shown here. PS: also talked about layers in the Nuxt 4 folder structure video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KnCNOp5Pbfs.html
Great video Alex! Layers is a feature that I personally use and love, but I had a small question: it seems that the default template for layers has the dependencies a bit outdated (nuxt 3.6.2) do you know if updates are expected in that regard? Thanks!
Oh yes, indeed. PR is welcome if you want to give it a stab @ github.com/nuxt/starter/blob/layer/package.json Be aware that ^3.6.2 means the "latest 3.x version, at least 3.6.2"
I assume if base layer is Nuxt 3.11 and layer-two is Nuxt 3.5, and app is Nuxt 3.8, 3.8 would be the version used for everything. I'd also be interested in learning how conflicts are resolved (like if layer 1 and layer 2 both had pages that were the same name)
sorry if i missed this but let's say i have a "shared components" layer and a "consuming app" . if nuxt/i18n is needed, do i install it on both the layer and the consuming app? and is pnpm a must for this?
Awesome! We have three teams and would like to put each project on layers (like team1-pj, team2-pj, team3-pj) Can we keep those projects in SPA and deploy them separately? if so, I'd love to know how to do that!
You should be able to deploy each layer on your own, sure! Or create a combination of e.g. 2 of them and then deploy it as spa (see ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7Lr0QTP1Ro8.html )
@@TheAlexLichter Thank you for your response! Anther question. I created base and main layers. I'd like to auto import common components from base without pathPrefix I tried to set the component setting in nuxt.config.ts, but it doesn't work.
Great video that made it easy to understand layers. I went through the video and used the monorepo setup as you show in the video. I then went ahead and updated everything to opt into Nuxt 4 features and modified the directory structure on both layers and the main app. I wanted to put my store in a one of the layers but as soon as I added the @pinia/nuxt module I started getting errors that the module couldn't be found. I backed everything out of the Nuxt 4 features and directory structure cleaned everything and re-installed everything. I still got the module not found error. I tried using the Tips in the Nuxt layers documentation regarding relative paths and aliases but still couldn't get it to find the module. Any ideas on this? I could just write a plugin and see how that works. It just seemed strange the other modules seemed to work fine.
@@TheAlexLichter However this is very powerful I think using this can create a great mess in the project strucure. So I will wait till others leran the hard way the best practices :)
wow so cool, but how to build ? is it still "npm run build for spa (stay on app folder and run this command)" ? is it better than microfrontend, right? thank you
Depends. If you want an SPA without APIs you still can run npm run generate. I talked about that (regardless of layers) in ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SiT_1tfuPa4.html
Hey! Great video about the layers. I am just wondering how to use eslint module across the layers so that I don't have to add it to every single layer. Is there any way how to do so?
What about extending or reusing pinia stores, so for example an auth layer would use the same store for authentification across multiple apps. What you be best practice for that?
Thank you so much for this awesome video, I have a case where i am building a SAAS with one code base and multiple databases one for each customer, is there any possibility to make layers as versions of the main application then choose the version depending on which customer is - means after login and get credentials you can run specific layer for this customer as he can has specific subdomain 😂😂😂
No, they will be overridden by the last registered layer if they have the same name, or the most specific one (if app extends an and an extends b, all three have a “Base.vue”, the app one will be used)
I want to create a base layer which maintain a timeout function that refreshes the Auth token every 10 mins, i generally start the timer when the app.vue is created, i want to add this logic to the base layer? Can i do that?
My root layer contains component named "helloWorld" and Layer 2 also contains component named "helloWorld". When I use helloWorld component in my root app I am getting component from root but i need component from layer 2 . What should be done to tell Nuxt to use the "helloWorld" component from layer 2.
HI there! Alexander, how do you think if it's a good idea to share some assets via the layers? As I got it now it's impossible, but as for me it looks like a good tool to share some common assets (e.g. common typography rules or something like that).
@@TheAlexLichter But actually I didn't find a clear way how to do it, and finally used a module for that. I don't know if I'm wrong but I didn't find something about the assets folder sharing via the layers.
Da müsstest du dann die relevante Komponente (oder Seite) ersetzen. Alles weitere klappt leider nicht, jedoch könntest du sowas ja bspw. über ne config abbilden.
It's possibile when extending a layer in two applications, handling colors in some sass files? Making for example, make the App1 blu and the App2 green? Or even make load a different whole variables.scss?
@@TheAlexLichter i can't figure out how! in this configuration how can i say:'hey nuxt, overwrite the layer /assets/scss/abstracts/variables.scss with this local path??' import { createResolver } from "@nuxt/kit"; const { resolve } = createResolver(import.meta.url); export default defineNuxtConfig({ devtools: { enabled: true }, extends:[ ['../../layer-tempo-star/', { install: true }] ], imports: { dirs: [resolve("stores/**")], }, }) and in my main scss file import variables like this @import './abstracts/variables';