How to use Nuxt Layers to encapsulate your code

🔗 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:

Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!

🌐 Connect further:

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

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

[ojvribeiro]

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

[martinpenev]

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

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

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

[MartyNZ]

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.

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

[jurarexx]

thank you I had no idea about nuxt layers

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

[turdalynnurasyl]

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

[olatunjiolakunle]

First, I like the dramatic intro. LOL

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

[fuadagayev-mgfk]

Powerfull, in nuxtjs 3 understand layers

[wjrvgjv]

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?

[calimio]

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

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

[ldeqgoe]

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!

[Berk]

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!

[MohamedFawzy-qhyu]

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

[scyre]

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