mirror of https://github.com/nuxt/nuxt.git
1.8 KiB
1.8 KiB
| 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.configandapp.config - Create a component library using
components/directory - Create utility and composable library using
composables/directory andutils/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.