Nuxt/docs/1.getting-started/9.layers.md

navigation.icon	description
uil:layer-group	Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.

Layers

One of the core features of Nuxt 3 is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.

Some use cases:

::list{type="success"}

• Share reusable configuration presets across projects using nuxt.config and app.config
• Create a component library using components/ directory
• Create utility and composable library using composables/ directory and utils/ directory
• Create Nuxt themes
• Create Nuxt module presets
• Share standard setup across projects ::

You can extend a layer by adding the extends property to the nuxt.config.ts file.

export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

A quick video made by Learn Vue to showcase the power of extends:

:video-player{src="https://www.youtube.com/watch?v=lnFCM7c9f7I"}

Authoring Nuxt Layers

See Layer Author Guide to learn more.

Examples

• Nuxt Docus Theme
• Nuxt Content Wind Theme