How to use Nuxt Layers to encapsulate your code

[@ChrisVisserDev]

In all fairness. I would have postponed the video in favor of the nice weather outside. You looked so happy! Thanks for the video!

[@TheAlexLichter]

Unfortunately the sun hid quickly after 😂 Glad you liked the video 😋

[@ojvribeiro]

Nuxt Layers are the best feature I ever seen in a framework.

[@TheAlexLichter]

Haven't seen something comparable yet and am super happy that this feature exists 🔥

[@scyre3190]

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

[@zaghloul-soft]

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 🚀

[@TheAlexLichter]

Exactly 🔥

[@fvbixn]

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!

[@TheAlexLichter]

Exactly that's way! Glad that you find layers useful in that matter 👍🏻

[@ragura]

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!

[@TheAlexLichter]

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 👍🏻

[@martinpenev6750]

Endlich habe ich Layers verstanden. Andere Videos zeigen das zu kompliziert. Danke dir!

[@TheAlexLichter]

Das freut mich zu hören! Gern doch 🙏🏻

[@aka_dado]

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)

[@TheAlexLichter]

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!

[@rs14058]

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! 🙏

[@TheAlexLichter]

Perfect timing! Glad it helped 🙌

[@MartyNZ64]

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.

[@turdalynnurasyl5981]

Great! Can you show example with extending from git repos? Would be very good.

[@ojvribeiro]

Yeah, I'm facing problems with dependencies auto-install for git based layers.

[@TheAlexLichter]

I might spin up an example in a bit, yes. In the mean time when it comes to auto dep install, check github.com/unjs/c12/issues/51

[@tamirhalperin2404]

It would be great to see a repo that shows how to use layers properly to manage multi-provider authentication

[@haexmas]

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.

[@TheAlexLichter]

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.

[@AdamDehaven]

Great video Alex 🚀

[@TheAlexLichter]

Thank you Adam 🙏🏻

[@jurarexx]

thank you I had no idea about nuxt layers

[@TheAlexLichter]

No problem at all! 🙌🏻

[@oemeraran8183]

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?

[@TheAlexLichter]

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]

how query between layer? or main layer handles that? layer will be view component only or can be full crud layer on their own?

[@oemeraran8183]

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

[@oemeraran8183]

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

[@МихаилБронников-ш9х]

Hi, Alexander! I do love what you do! Are there any options to watch your "Vue.js Hydration Demystified" speech or is it totally closed?

[@TheAlexLichter]

It is up now 👏🏻 kzbin.info/www/bejne/iorcdp2EZbqlnKM

[@gabrielserejo848]

Hahahah this introduction was perfect

[@TheAlexLichter]

Glad to hear that 🙊

[@DontFollowZim]

Btw, label is spelled with "el" at the end, not "le" as you spelled it when you wrote "whitelabel"

[@TheAlexLichter]

Thank you! Guess my head was already hunting Easter eggs 🙈

[@uplaymedia]

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? :)

[@svenvanreenen]

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

[@TheAlexLichter]

@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

[@Berk45632]

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!

[@kitersrefuge7353]

Thanks Alexander. Appreciate your content. Any chance you can do one on "Debugging a Nuxt / Vuetify" app ? I am a Vue dev but a newb at Nuxt.

[@TheAlexLichter]

Noted! 👌

[@DavidDeSloovere]

Awesome intro and great video.

[@TheAlexLichter]

Thank you kindly David 🙏🏻

[@kedniko]

Loved the intro!

[@TheAlexLichter]

Thank you 🙏🏻🙌🏻

[@olatunjiolakunle6908]

First, I like the dramatic intro. LOL

[@TheAlexLichter]

Haha, happy you enjoyed it 😛

[@DanielMuñozMartín-m4c]

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!

[@TheAlexLichter]

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"

[@germanmartirosyan6230]

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

[@TheAlexLichter]

Yes, that seems like a great use case for layers 👌🏻

[@calimio6]

I'm about to federate a project and this feature is wild

[@TheAlexLichter]

Right? Extremely helpful 👌🏻

[@joshdeltener2012]

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)

[@TheAlexLichter]

Yes, the version of the main app is used for everything. Conflicts are simple overrides :)

[@joshdeltener2012]

@@TheAlexLichter conflicts - but who wins if both layer 1 and layer 2 have the same page?

[@codewithguillaume]

🔥🔥🔥🔥

[@TakakiMiyajima]

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!

[@TheAlexLichter]

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 kzbin.info/www/bejne/bX3VYYSKhZaFpZo )

[@TakakiMiyajima]

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

[@MohamedFawzy-qh4yu]

how to manage the unit tests (vitest + coverage) of the different layers?

[@DaveStewartLondon]

Do you have a link to the issue layers. import issue?

[@TheAlexLichter]

You mean named imports? The only issue is the layer tracking issue for that at the moment (linked in the description) ☺️

[@EmanuelTheG]

@TheAlexLichter is it recommended/possible to provide assets such as .css files to the main application?

[@TheAlexLichter]

You can do that, sure!

[@fuadagayev-mg7fk]

Powerfull , in nuxtjs 3 understand layers

[@derHodrig]

how do you export things from your layer to the app, like interfaces or composables?

[@chamberlainpi]

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?

[@TheAlexLichter]

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 kzbin.info/www/bejne/gZ-mf4KmarWVnNU

[@frederickvalone6729]

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]

Do you have a reproduction by any chance? ☺️

[@prochy_em]

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?

[@TheAlexLichter]

Should be enough to use it on the lowest layer, as long as is extended by all layers (or their child layers etc etc)

[@MrFelixClement]

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?

[@TheAlexLichter]

You can provide pinia stores in a lower layer and they'll be usable, sure. That should work 👍🏻

[@scyre3190]

You mentioned the paths, the auto-importing (components, composables etc.) of each layer works as expected or is the caveat hanging in there too?

[@TheAlexLichter]

Auto Imports will work fine. Be aware that if you override a component (same name in both layers), the „more specific one“ will be imported

[@rayan_azzam]

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 😂😂😂

[@overnightmares]

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?

[@yoskokleng3658]

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

[@TheAlexLichter]

Depends. If you want an SPA without APIs you still can run npm run generate. I talked about that (regardless of layers) in kzbin.info/www/bejne/iZq3kGSqm9qDl5Y

[@TheDamage1982]

Hello. Is it possible to specify which layer to use a component from if there are components with the same name in several layers?

[@TheAlexLichter]

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)

[@TheDamage1982]

@@TheAlexLichter Thanks

[@rrd_webmania]

Cool

[@TheAlexLichter]

Do you think you will use Layers soon?

[@rrd_webmania]

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

[@linpengteng]

What is the priority of naming components with the same name in different layers?

[@TheAlexLichter]

The “most specific” layers have higher priority then (and you all extending any layer has the highest)

[@linpengteng]

@@TheAlexLichter How to understand the 'most specific' layer. It refers to the nearest layer?

[@TheAlexLichter]

Think of: App extends A, A extends B. Then App is the most specific one, followed by A. "B" is the least specific one.

[@linpengteng]

@@TheAlexLichter OK，Thanks

[@northwest569]

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]

Yes absolutely, you can do that ☺️

[@northwest569]

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

[@anshumanvats1632]

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?

[@TheAlexLichter]

You *can*, but a nuxt plugin would be better IMO because components are overridden.

[@IstiaqueHasanNihal]

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.

[@TheAlexLichter]

At the moment you can’t, you’d have to rename them *or* provide the component twice with different names

[@davetarantula5851]

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 think that should work. You can fully override the variables.scss in the "app" (or more specific layers).

[@davetarantula5851]

@@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';

[@16edik]

Kann man mit Layers nur paged ersetzen oder auch erweitern? Mal angenommen ein Client möchte in einem Formular einen TextInput mehr.

[@TheAlexLichter]

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.

[@hyperprotagonist]

Whitelabel* 😊

[@TheAlexLichter]

Thanks! Head was already at the Easter egg hunt I assume 😁

[@ngetichishmael]

Did you just do a 100-metre dash in 9 seconds? You are in the wrong profession. Stop doing Nuxt. Sprinting is your Stack. 😅😅

[@DoggetX60l]

hint us that Sprinting stack so we can not run the 100-m

[@TheAlexLichter]

😂😂😂

[@burnardruddle3377]

*Promosm* 😢

[@TheAlexLichter]

???

[@khaledoghli3400]

Thanks dude, any example with i18n , in the layers i get ctx.t undefined !?