Nuxt layer

[tianzx777]

What is the role of nuxt layer? When using a layer in a project, do you only package the components in the layer you use? If the components in the layer are updated, can the online main project be automatically updated?

[AloisSeckar]

The goal of layers is to allow convenient re-use of Nuxt code across more apps. You can imagine it as an inheritance. The "base layer" already has some features (components, composables, pages, utils, etc.) and another app "extends" them - it can use everything from the base + add its own.

I have no experience with a monorepo having more "layers" nested in one codebase. I am using the base layer as a separate NPM package.

In my current project we will have a number of separate Nuxt apps, each covering one cusomer's business domain, but there will be a lot of common things. So I am composing a custom UI library (based on Nuxt UI and FormKit) + all other common features as logging with Consola or state management Pinia, as one Nuxt project, then publish is as NPM package into private repo and then I can create a new app with only one dev dependency in package.json:

"devDependencies": {
  "@ava/eaplikace-nuxt": "1.0.0-dev.52"
}

And in nuxt.config.ts I have:

extends: [
  ['@ava/eaplikace-nuxt', { install: true }],
],

And that's basically it! I have all UI components, all composables, all utils and all npm modules from base layer @ava/eaplikace-nuxt without further config ready to use, so I can just start building views and writing logic to cover the use cases. And it is reusable in all future "module" apps to come.

Well, there are some gotchas. I still need to copy a couple of settings, ESLint config, Vitest config and so. But it comes very handy.

[meirroth]

@AloisSeckar What a beautiful explanation! Thank you 🙏