Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-20 07:30:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add layers video by LearnVue

Browse Source
This commit is contained in:
Sébastien Chopin 2023-03-23 14:25:44 +01:00 committed by GitHub
parent 0b5ba6c3e9
commit d3d09d5d3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/1.getting-started/9.layers.md
View File

@ -5,20 +5,22 @@ description: Nuxt provides a powerful system that allows you to extend the defau
# 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:
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/` and `utils/` directories
- Create Nuxt themes
- Create [Nuxt themes](https://github.com/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{}[nuxt.config.ts]
```ts [nuxt.config.ts]
export default defineNuxtConfig({
extends: [
'../base', // Extend from a local layer
@ -28,6 +30,10 @@ export default defineNuxtConfig({
})
```
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.