From 6361b075fbd6cc72d5a5a76f6bf3a96d2dcdf652 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 03:44:11 +1000 Subject: [PATCH 01/12] docs(api): add NuxtLayout component docs --- .../3.api/2.components/2.nuxt-layout.md | 58 ++++++++++++++++++- 1 file changed, 55 insertions(+), 3 deletions(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index e32f5b6d00f..c49426b0078 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -1,7 +1,59 @@ # `` -::ReadMore{link="/guide/directory-structure/app"} -:: +You can use `` component to activate `default` layout on `app.vue` or `error.vue` . + +```vue [/app.vue] + +``` + +`` is also used to override `default` layout on `app.vue` , `error.vue` or even page components found in the `/pages` directory. + +## `name` props + +`` component accepts `name` property to pass the name of the custom layout. You can pass `name` props to override the default layout, where `name` can be a static string, reactive reference or even a computed property as long as it matches the name of the layout file in `/layouts` directory. + +### Examples + +```vue [pages/index.vue] + + + +``` + +The layout name is normalized to kebab-case, so if your layout file is named, `errorLayout.vue` , it will become `error-layout` when passing as a `name` property to ``. + +```vue [/error.vue] + +``` + +## Layout and transition + +`` renders incoming content via ``. This incoming content is then wrapped around Vue’s `Transition` component to activate layout transition. For this layout transition to work as expected, it is recommended that `` is **not** the root element of the page component. + +```vue [pages/index.vue] + +``` -::NeedContribution +::ReadMore{link="/guide/directory-structure/layouts"} :: From d4aa2a4c1eaf2f32180972858aea90e623345931 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 03:53:04 +1000 Subject: [PATCH 02/12] docs(api): NuxtLayout: fix linting issue --- docs/content/3.api/2.components/2.nuxt-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index c49426b0078..cd18c5fe497 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -10,7 +10,7 @@ You can use `` component to activate `default` layout on `app.vue` ``` -`` is also used to override `default` layout on `app.vue` , `error.vue` or even page components found in the `/pages` directory. +`` is also used to override `default` layout on `app.vue` , `error.vue` or even page components found in the `/pages` directory. ## `name` props From 4140d1d0c47edb215f671403cc1750731b11680d Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 10:49:22 +1000 Subject: [PATCH 03/12] Update docs/content/3.api/2.components/2.nuxt-layout.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/3.api/2.components/2.nuxt-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index cd18c5fe497..ff6c2bc4fdc 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -1,6 +1,6 @@ # `` -You can use `` component to activate `default` layout on `app.vue` or `error.vue` . +You can use `` component to activate `default` layout on `app.vue` or `error.vue`. ```vue [/app.vue] ``` -`` is also used to override `default` layout on `app.vue` , `error.vue` or even page components found in the `/pages` directory. +`` can also be used to override `default` layout on `app.vue`, `error.vue` or even page components found in the `/pages` directory. ## `name` props From 7a67236b9229cfd8f05f5344e5d3f839bcc5b796 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 10:49:44 +1000 Subject: [PATCH 05/12] Update docs/content/3.api/2.components/2.nuxt-layout.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/3.api/2.components/2.nuxt-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index 485aac9272b..fe31893e661 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -12,7 +12,7 @@ You can use `` component to activate `default` layout on `app.vue` `` can also be used to override `default` layout on `app.vue`, `error.vue` or even page components found in the `/pages` directory. -## `name` props +## `name` prop `` component accepts `name` property to pass the name of the custom layout. You can pass `name` props to override the default layout, where `name` can be a static string, reactive reference or even a computed property as long as it matches the name of the layout file in `/layouts` directory. From 1391c4db421e87e4b4b03532b7e7ec7f3265d18e Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 10:49:52 +1000 Subject: [PATCH 06/12] Update docs/content/3.api/2.components/2.nuxt-layout.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/3.api/2.components/2.nuxt-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index fe31893e661..a15216ddd73 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -14,7 +14,7 @@ You can use `` component to activate `default` layout on `app.vue` ## `name` prop -`` component accepts `name` property to pass the name of the custom layout. You can pass `name` props to override the default layout, where `name` can be a static string, reactive reference or even a computed property as long as it matches the name of the layout file in `/layouts` directory. +`` component accepts the `name` prop, which you can pass to use a non-default layout, where `name` can be a static string, reactive reference or a computed property. It **must** match the name of the corresponding layout file in the `/layouts` directory. ### Examples From 933a5775943a57fe408531ae7c43b208fe331d51 Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 10:49:59 +1000 Subject: [PATCH 07/12] Update docs/content/3.api/2.components/2.nuxt-layout.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/3.api/2.components/2.nuxt-layout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index a15216ddd73..22061f82b37 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -27,7 +27,7 @@ You can use `` component to activate `default` layout on `app.vue` ``` From 48294bb3790e22a8b6f269a322cc74abc060ae8a Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 10:50:09 +1000 Subject: [PATCH 08/12] Update docs/content/3.api/2.components/2.nuxt-layout.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com> --- docs/content/3.api/2.components/2.nuxt-layout.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index 22061f82b37..d5f7e32deab 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -31,7 +31,8 @@ const layout = 'custom' ``` -The layout name is normalized to kebab-case, so if your layout file is named, `errorLayout.vue` , it will become `error-layout` when passing as a `name` property to ``. +::alert{icon=👉} +Please note the layout name is normalized to kebab-case, so if your layout file is named `errorLayout.vue`, it will become `error-layout` when passed as a `name` property to ``. ```vue [/error.vue] -``` ## Layout and transition From 080f769b8c22cff6fc5bbc144303d0ef66f52c1c Mon Sep 17 00:00:00 2001 From: Krutie Patel Date: Sun, 31 Jul 2022 10:55:28 +1000 Subject: [PATCH 09/12] docs(api): fix alert formatting --- docs/content/3.api/2.components/2.nuxt-layout.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/2.nuxt-layout.md index d5f7e32deab..f1dcd249901 100644 --- a/docs/content/3.api/2.components/2.nuxt-layout.md +++ b/docs/content/3.api/2.components/2.nuxt-layout.md @@ -33,6 +33,7 @@ const layout = 'custom' ::alert{icon=👉} Please note the layout name is normalized to kebab-case, so if your layout file is named `errorLayout.vue`, it will become `error-layout` when passed as a `name` property to ``. +:: ```vue [/error.vue] ``` -`` can also be used to override `default` layout on `app.vue`, `error.vue` or even page components found in the `/pages` directory. +`` can be used to override `default` layout on `app.vue`, `error.vue` or even page components found in the `/pages` directory. ## `name` prop @@ -37,7 +37,7 @@ Please note the layout name is normalized to kebab-case, so if your layout file ```vue [/error.vue]