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

3 ай бұрын

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

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

@TheAlexLichter

3 ай бұрын

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

@scyre3190

2 ай бұрын

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

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

@TheAlexLichter

3 ай бұрын

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

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 🔥

Great video Alex 🚀

@TheAlexLichter

3 ай бұрын

Thank you Adam 🙏🏻

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

2 ай бұрын

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

Awesome intro and great video.

@TheAlexLichter

3 ай бұрын

Thank you kindly David 🙏🏻

thank you I had no idea about nuxt layers

@TheAlexLichter

3 ай бұрын

No problem at all! 🙌🏻

Loved the intro!

@TheAlexLichter

3 ай бұрын

Thank you 🙏🏻🙌🏻

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

2 ай бұрын

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!

Hahahah this introduction was perfect

@TheAlexLichter

3 ай бұрын

Glad to hear that 🙊

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.

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

3 ай бұрын

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

First, I like the dramatic intro. LOL

@TheAlexLichter

2 ай бұрын

Haha, happy you enjoyed it 😛

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

@ojvribeiro

3 ай бұрын

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

@TheAlexLichter

3 ай бұрын

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

2 ай бұрын

It is up now 👏🏻 kzread.info/dash/bejne/ho2tp8yHYLjYlqQ.html

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

@TheAlexLichter

2 ай бұрын

You can do that, sure!

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?

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

3 ай бұрын

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"

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?

@TheAlexLichter

2 ай бұрын

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

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

2 ай бұрын

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

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

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

2 ай бұрын

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

Powerfull , in nuxtjs 3 understand layers

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

@TheAlexLichter

Ай бұрын

Right? Extremely helpful 👌🏻

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.

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

@TheAlexLichter

3 ай бұрын

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

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? ☺️

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.

Cool

@TheAlexLichter

3 ай бұрын

Do you think you will use Layers soon?

@rrd_webmania

3 ай бұрын

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

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

20 күн бұрын

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 kzread.info/dash/bejne/aYCmkrONgJS4n5s.html )

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

2 ай бұрын

Yes absolutely, you can do that ☺️

@northwest569

2 ай бұрын

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

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

3 ай бұрын

I think that should work. You can fully override the variables.scss in the "app" (or more specific layers).

@davetarantula5851

3 ай бұрын

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

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

3 ай бұрын

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

3 ай бұрын

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

3 ай бұрын

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

3 ай бұрын

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

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

29 күн бұрын

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

29 күн бұрын

@@TheAlexLichter Thanks

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

2 ай бұрын

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

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

3 ай бұрын

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

3 ай бұрын

@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

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

22 сағат бұрын

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

@TheAlexLichter

19 сағат бұрын

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

18 сағат бұрын

@@TheAlexLichter OK，Thanks

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

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

@TheAlexLichter

3 ай бұрын

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

Whitelabel* 😊

@TheAlexLichter

3 ай бұрын

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

*Promosm* 😢

@TheAlexLichter

3 ай бұрын

???

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

@user-cy3km7fb9f

3 ай бұрын

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

@TheAlexLichter

3 ай бұрын

😂😂😂