N
Nuxt•2mo ago
Zhaolin Lau

How nuxt layers work

How to use nuxt layers in nuxt 4? Give me detailed example.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Zhaolin Lau. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Nuxt layers are a powerful feature that allow you to share, extend, and override parts of a Nuxt application. They enable you to organize code, reuse configurations, and even create themes or presets that can be shared across multiple projects. Layers can be local, from npm packages, or remote git repositories. How Nuxt Layers Work - Structure: A Nuxt layer is essentially a partial Nuxt application. It has a structure similar to a standard Nuxt project, typically including a nuxt.config.ts file and directories like app/components, app/pages, etc. - Extending: You can extend one or more layers in your main project using the extends property in your nuxt.config.ts. The main project always has the highest priority, so its files override those from layers. Among layers, the order in extends determines priority (first overrides second, etc.). Auto-scanned layers from ~~/layers are included in alphabetical order (Z overrides A) and have lower priority than those listed in extends and your project itself. - Override Mechanism: If multiple layers (or your project) define the same file (e.g., a component or config), the one with higher priority is used. This allows you to override or extend functionality as needed. How to Use Nuxt Layers in Nuxt 4 1. Create a Layer Suppose you want to create a base layer with a component and some configuration. Directory structure: 
my-app/
  nuxt.config.ts
  app/
    app.vue
  layers/
    base/
      nuxt.config.ts
      app/
        components/
          BaseComponent.vue
my-app/
  nuxt.config.ts
  app/
    app.vue
  layers/
    base/
      nuxt.config.ts
      app/
        components/
          BaseComponent.vue
layers/base/nuxt.config.ts 
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Extending Configs is Fun!',
      meta: [
        { name: 'description', content: 'I am using the extends feature in Nuxt!' },
      ],
    },
  },
})
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Extending Configs is Fun!',
      meta: [
        { name: 'description', content: 'I am using the extends feature in Nuxt!' },
      ],
    },
  },
})
layers/base/app/components/BaseComponent.vue 
<template>
  <h1>Extending Components is Fun!</h1>
</template>
<template>
  <h1>Extending Components is Fun!</h1>
</template>
2. Extend the Layer in Your Project my-app/nuxt.config.ts 
export default defineNuxtConfig({
  extends: [
    './layers/base', // Path to your local layer
  ],
})
export default defineNuxtConfig({
  extends: [
    './layers/base', // Path to your local layer
  ],
})
my-app/app/app.vue 
<template>
  <BaseComponent />
</template>
<template>
  <BaseComponent />
</template>
When you run your Nuxt app, it will use the BaseComponent from the base layer and apply the head configuration from the layer as well. 3. Multiple Layers and Priority You can extend multiple layers. The order in the extends array determines their priority (first has highest among layers). Your project always has the highest priority. 
export default defineNuxtConfig({
  extends: [
    './layers/base',   // Highest among layers
    './layers/theme',  // Medium
    './layers/custom', // Lowest among extends
  ],
  // Your project files override all layers
})
export default defineNuxtConfig({
  extends: [
    './layers/base',   // Highest among layers
    './layers/theme',  // Medium
    './layers/custom', // Lowest among extends
  ],
  // Your project files override all layers
})
If you also have auto-scanned layers in ~~/layers, they are included after those listed in extends, in reverse alphabetical order (Z overrides A) Layer Priority. 4. What Can Be Shared or Overridden Layers can provide or override: - Components (app/components) - Pages (app/pages) - Layouts (app/layouts) - Middleware (app/middleware) - Plugins (app/plugins) - Utils (app/utils) - Server endpoints (server) - Config files (nuxt.config.ts, app/app.config.ts) 5. Example: Using a Layer from a Git Repository or npm Package You can also extend from a remote git repository or npm package: 
export default defineNuxtConfig({
  extends: [
    'github:username/repoName#v1.0.0', // GitHub repo
    '@my-themes/awesome',              // npm package
  ],
})
export default defineNuxtConfig({
  extends: [
    'github:username/repoName#v1.0.0', // GitHub repo
    '@my-themes/awesome',              // npm package
  ],
})
You can pass options (like authentication) or override the layer alias as needed Publishing Layers. --- Summary:
Nuxt layers let you modularize, share, and override code/configuration in a scalable way. You create layers as partial Nuxt apps, then extend them in your main project using the extends property. The override order is: your project > extends (in order) > auto-scanned layers (Z to A). Layers can be local, npm, or git-based, and can provide any part of a Nuxt app structure Authoring Nuxt Layers Getting Started: Layers. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@520675622830342144> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?