Nuxt Layers

Nuxt Layers are a powerful mechanism to share configuration, components, and logic across multiple projects. It's like having a full Nuxt application inside your application!

https://nuxt.com/docs/guide/going-further/layers

Concept

A "Layer" is simply a directory (local, git, or npm) containing a nuxt.config.ts file. Your application can "extend" this layer. It will then inherit:

• Configuration (nuxt.config.ts)
• Components (components/)
• Composables (composables/)
• Plugins (plugins/)
• Pages (pages/)
• And more...

This is ideal for creating a "Design System" or a base configuration for your company.

Overriding

The main application always has priority.

• If you define a config in your nuxt.config.ts, it overrides the layer's config.
• If you create a components/AppAlert.vue file, it will replace the layer's file (if it exists at the same path).

Challenge

In this exercise, we have prepared a base-layer folder that contains a configuration with runtimeConfig values.

1. Open nuxt.config.ts and extend the local layer ./base-layer.
2. Look at app.vue, the appName and appVersion values should now display.
3. (Optional) Add your own runtimeConfig.public.appName in the main nuxt.config.ts to see how it overrides the layer's config.