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

45 lines
1.8 KiB
Markdown
Raw Normal View History

---
navigation.icon: uil:layer-group
description: Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.
---
# Layers
2023-03-23 13:25:44 +00:00
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`
2023-07-07 16:24:09 +00:00
- Create a component library using [`components/` directory](/docs/guide/directory-structure/components)
- Create utility and composable library using [`composables/` directory](/docs/guide/directory-structure/composables) and [`utils/` directory](/docs/guide/directory-structure/utils)
2023-03-23 13:25:44 +00:00
- Create [Nuxt themes](https://github.com/nuxt-themes)
- Create Nuxt module presets
- Share standard setup across projects
::
2023-07-07 16:24:09 +00:00
You can extend a layer by adding the [extends](/docs/api/configuration/nuxt-config#extends) property to the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file.
2023-03-23 13:25:44 +00:00
```ts [nuxt.config.ts]
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
]
})
```
2023-03-23 13:25:44 +00:00
A quick video made by [Learn Vue](https://go.learnvue.co) to showcase the power of `extends`:
:video-player{src="https://www.youtube.com/watch?v=lnFCM7c9f7I"}
## Authoring Nuxt Layers
See [Layer Author Guide](/docs/guide/going-further/layers) to learn more.
## Examples
- [Nuxt Docus Theme](https://github.com/nuxt-themes/docus#readme)
- [Nuxt Content Wind Theme](https://github.com/Atinux/content-wind#readme)