docs(api): add <NuxtLayout> component docs (#6264)

Co-authored-by: Damian Głowala <48835293+DamianGlowala@users.noreply.github.com>

docs/content/3.api/2.components/2.nuxt-layout.md

@@ -1,7 +1,61 @@
 # `<NuxtLayout>`
 
-::ReadMore{link="/guide/directory-structure/app"}
+You can use `<NuxtLayout />` component to activate `default` layout on `app.vue` or `error.vue`.
+
+```vue [/app.vue]
+<template>
+  <NuxtLayout>
+    some page content
+  </NuxtLayout>
+</template>
+```
+
+`<NuxtLayout />` can be used to override `default` layout on `app.vue`, `error.vue` or even page components found in the `/pages` directory.
+
+## `name` prop
+
+`<NuxtLayout />` 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
+
+```vue [pages/index.vue]
+<template>
+  <NuxtLayout :name="layout">
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<script setup>
+// layouts/custom.vue
+const layout = 'custom'
+</script>
+```
+
+::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 `<NuxtLayout />`.
 ::
 
-::NeedContribution
+```vue [/error.vue]
+<template>
+  <NuxtLayout name="error-layout">
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+## Layout and transition
+
+`<NuxtLayout />` renders incoming content via `<slot />`, which is then wrapped around Vue’s `<Transition />` component to activate layout transition. For this to work as expected, it is recommended that `<NuxtLayout />` is **not** the root element of the page component.
+
+```vue [pages/index.vue]
+<template>
+  <div>
+    <NuxtLayout name="custom">
+      <template #header> Some header template content. </template>
+    </NuxtLayout>
+  </div>
+</template>
+```
+
+::ReadMore{link="/guide/directory-structure/layouts"}
 ::