Authoring Nuxt Layers

Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain. (Read More)

A minimal Nuxt layer directory should contain anuxt.config.ts file to indicate it is a layer.

exportdefaultdefineNuxtConfig({})

Additionally, certain other files in the layer directory will be auto-scanned and used by Nuxt for the project extending this layer.

• components/* - Extend the default components
• composables/* - Extend the default composables
• pages/* - Extend the default pages
• server/* - Extend the default server endpoints & middleware
• nuxt.config.ts - Extend the default nuxt config
• app.config.ts - Extend the default app config

Basic Example

exportdefaultdefineNuxtConfig({extends: ['./base'  ]})

  <template>    <BaseComponent/>  </template>

exportdefaultdefineNuxtConfig({// Extending from base nuxt.config.ts!app: {head: {title:'Extending Configs is Fun!',meta: [          {name:'description',content:'I am using the extends feature in nuxt 3!' }        ],      }    }})

  <template>    <h1>Extending Components is Fun!</h1>  </template>

Starter Template

To get started you can initialize a layer with thenuxt/starter/layer template. This will create a basic structure you can build upon. Execute this command within the terminal to get started:

npxnuxiinit--templatelayernuxt-layer

Follow up on the README instructions for the next steps.

npxnuxiinit--templategh:nuxt-themes/startermy-theme

Publishing Layers

You can publish and share layers by either using a remote source or an npm package.

Git Repository

You can use a git repository to share your Nuxt layer. Some examples:

exportdefaultdefineNuxtConfig({extends: ['github:username/repoName',// GitHub Remote Source'github:username/repoName/base',// GitHub Remote Source within /base directory'github:username/repoName#dev',// GitHub Remote Source from dev branch'github:username/repoName#v1.0.0',// GitHub Remote Source from v1.0.0 tag'gitlab:username/repoName',// GitLab Remote Source example'bitbucket:username/repoName',// Bitbucket Remote Source example  ]})

npm Package

You can publish Nuxt layers as an npm package that contains the files and dependencies you want to extend. This allows you to share your config with others, use it in multiple projects or use it privately.

To extend from an npm package, you need to make sure that the module is published to npm and installed in the user's project as a devDependency. Then you can use the module name to extend the current nuxt config:

exportdefaultdefineNuxtConfig({extends: [// Node Module with scope'@scope/moduleName',// or just the module name'moduleName'  ]})

To publish a layer directory as an npm package, you want to make sure that thepackage.json has the correct properties filled out. This will make sure that the files are included when the package is published.

{"name":"my-theme","version":"1.0.0","type":"module","main":"./nuxt.config.ts","dependencies": {},"devDependencies": {"nuxt":"^3.0.0"  }}

Now you can proceed to publish the module to npm, either publicly or privately.

Tips

Relative Paths and Aliases

When importing using aliases (such as~/ and@/) in a layer components and composables, note that aliases are resolved relative to the user's project paths. As a workaround, you canuse relative paths to import them. We are working on a better solution for named layer aliases.

Also when using relative paths innuxt.config file of a layer, (with exception of nestedextends) they are resolved relative to user's project instead of the layer. As a workaround, use full resolved paths innuxt.config:

import {fileURLToPath }from'url'import {dirname,join }from'path'constcurrentDir=dirname(fileURLToPath(import.meta.url))exportdefaultdefineNuxtConfig({css: [join(currentDir,'./assets/main.css')  ]})

Multi-Layer Support for Nuxt Modules

You can use the internal arraynuxt.options._layers to support custom multi-layer handling for your modules.

Example:

exportdefaultdefineNuxtModule({setup(_options,nuxt){for (constlayerofnuxt.options._layers) {// You can check for a custom directory existence to extend for each layerconsole.log('Custom extension for',layer.cwd,layer.config)    }  }})

Notes:

• Earlier items in the_layers array have higher priority and override later ones
• The user's project is the first item in the_layers array

Going Deeper

Configuration loading and extends support is handled byunjs/c12, merged usingunjs/defu and remote git sources are supported usingunjs/giget. Check the docs and source code to learn more.

We are working to bring more improvements for layers support. Please refer tonuxt/nuxt#13367.