From d3d09d5d3d3977489dbe801b38808ea1e3667239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= Date: Thu, 23 Mar 2023 14:25:44 +0100 Subject: [PATCH] docs: add layers video by LearnVue --- docs/1.getting-started/9.layers.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/1.getting-started/9.layers.md b/docs/1.getting-started/9.layers.md index a836e00675..3161569943 100644 --- a/docs/1.getting-started/9.layers.md +++ b/docs/1.getting-started/9.layers.md @@ -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.