How to use Nuxt Layers to encapsulate your code
HTML-код
- Опубликовано: 24 июл 2024
- 🔗 Nuxt Layers are a powerful option to share code across applications or even encapsulate code by feature or DDD-style in projects. But how do they work and how to set them up? Learn all of thati n this video!
Key points:
🔧 How to set up layers
🧠 Understand use cases for them
👀 Building a simple layer architecture from scratch
---
Links:
🔗 Docs - nuxt.com/docs/guide/going-fur...
🔗 Code - github.com/manniL/alexander-l...
🔗 Layer tracker issue - github.com/nuxt/nuxt/issues/1...
🔗 DejaVue - dejavue.fm/ - @DejaVueFm
📺 My previous talk about Nuxt layers - • Multi-variant apps wit... @vueschool
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
Chapters:
00:00 Intro
00:39 The problems to solve
04:20 Setting up our demo application
05:36 Looking into the base layer
06:41 The .playground folder
07:52 Make our app extend the base layer
10:03 Overriding files from layers
11:39 Extend multiple layers
13:53 Layer Caveats
15:40 Summary 
Наука
In all fairness. I would have postponed the video in favor of the nice weather outside. You looked so happy! Thanks for the video!
Unfortunately the sun hid quickly after 😂
Glad you liked the video 😋
Endlich habe ich Layers verstanden. Andere Videos zeigen das zu kompliziert. Danke dir!
Das freut mich zu hören! Gern doch 🙏🏻
Nuxt Layers are the best feature I ever seen in a framework.
Haven't seen something comparable yet and am super happy that this feature exists 🔥
@@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.
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!
Exactly that's way! Glad that you find layers useful in that matter 👍🏻
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.
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 🚀
Exactly 🔥
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!
thank you I had no idea about nuxt layers
No problem at all! 🙌🏻
Great video Alex 🚀
Thank you Adam 🙏🏻
Awesome intro and great video.
Thank you kindly David 🙏🏻
Loved the intro!
Thank you 🙏🏻🙌🏻
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 👍🏻
Hahahah this introduction was perfect
Glad to hear that 🙊
Great! Can you show example with extending from git repos? Would be very good.
Yeah, I'm facing problems with dependencies auto-install for git based layers.
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
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.
🔥🔥🔥🔥
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?
It is up now 👏🏻
ruclips.net/video/TYyEjN0UrfA/видео.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"
how to manage the unit tests (vitest + coverage) of the different layers?
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!
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?
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 😂😂😂
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?
You can provide pinia stores in a lower layer and they'll be usable, sure. That should work 👍🏻
First, I like the dramatic intro. LOL
Haha, happy you enjoyed it 😛
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?
Should be enough to use it on the lowest layer, as long as is extended by all layers (or their child layers etc etc)
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 ruclips.net/video/7Lr0QTP1Ro8/видео.html )
Powerfull , in nuxtjs 3 understand layers
@TheAlexLichter is it recommended/possible to provide assets such as .css files to the main application?
You can do that, sure!
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.
Do you have a reproduction by any chance? ☺️
You mentioned the paths, the auto-importing (components, composables etc.) of each layer works as expected or is the caveat hanging in there too?
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
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
I'm about to federate a project and this feature is wild
Right? Extremely helpful 👌🏻
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 ☺️
how query between layer? or main layer handles that? layer will be view component only or can be full crud layer on their own?
@@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)
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?
You *can*, but a nuxt plugin would be better IMO because components are overridden.
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).
Yes absolutely, you can do 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.
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.
At the moment you can’t, you’d have to rename them *or* provide the component twice with different names
Do you have a link to the issue layers. import issue?
You mean named imports? The only issue is the layer tracking issue for that at the moment (linked in the description) ☺️
Hello. Is it possible to specify which layer to use a component from if there are components with the same name in several layers?
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)
@@TheAlexLichter Thanks
Cool
Do you think you will use Layers soon?
@@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 :)
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?
I think that should work. You can fully override the variables.scss in the "app" (or more specific layers).
@@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';
What is the priority of naming components with the same name in different layers?
The “most specific” layers have higher priority then (and you all extending any layer has the highest)
@@TheAlexLichter How to understand the 'most specific' layer. It refers to the nearest layer?
Think of: App extends A, A extends B. Then App is the most specific one, followed by A. "B" is the least specific one.
@@TheAlexLichter OK，Thanks
Btw, label is spelled with "el" at the end, not "le" as you spelled it when you wrote "whitelabel"
Thank you! Guess my head was already hunting Easter eggs 🙈
Whitelabel* 😊
Thanks! Head was already at the Easter egg hunt I assume 😁
*Promosm* 😢
???
Did you just do a 100-metre dash in 9 seconds?
You are in the wrong profession.
Stop doing Nuxt.
Sprinting is your Stack.
😅😅
hint us that Sprinting stack so we can not run the 100-m
😂😂😂
Thanks dude, any example with i18n , in the layers i get ctx.t undefined !?