mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-03 19:07:15 +00:00
39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
|
---
|
||
|
|
navigation.icon: uil:layer-group
|
||
|
|
description: 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 example 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/` and `utils/` directories
|
||
|
|
- Create Nuxt themes
|
||
|
|
- Create Nuxt module presets
|
||
|
|
- Share standard setup across projects
|
||
|
|
::
|
||
|
|
|
||
|
|
You can extend a layer by adding the [extends](/docs/api/configuration/nuxt-config#extends) property to the `nuxt.config.ts` file.
|
||
|
|
|
||
|
|
```ts{}[app/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
|
||
|
|
]
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## 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)
|