@nuxt/docs-nightly 4.4.0-29552640.096fa1dc → 4.4.0-29553843.0c5869c2

package/2.directory-structure/1.app/1.layouts.md

@@ -168,6 +168,65 @@ This is useful when you want to manage layouts centrally in your configuration r
 
 :link-example{to="/docs/4.x/examples/features/layouts"}
 
+## Passing Props to Layouts
+
+You can pass props to layouts in several ways.
+
+### Via `definePageMeta`
+
+Use the object syntax for the `layout` property to pass props directly from your page:
+
+::code-group
+
+```vue [app/pages/dashboard.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: {
+    name: 'panel',
+    props: {
+      sidebar: true,
+      title: 'Dashboard',
+    },
+  },
+})
+</script>
+```
+
+```vue [app/layouts/panel.vue]
+<script setup lang="ts">
+const props = defineProps<{
+  sidebar?: boolean
+  title?: string
+}>()
+</script>
+
+<template>
+  <div>
+    <aside v-if="sidebar">
+      Sidebar
+    </aside>
+    <main>
+      <h1>{{ title }}</h1>
+      <slot />
+    </main>
+  </div>
+</template>
+```
+
+::
+
+::tip
+Props are fully typed based on your layout's `defineProps`. You'll get autocomplete and type-checking in your editor.
+::
+
+### Via `setPageLayout`
+
+You can also pass props when changing the layout dynamically with [`setPageLayout`](/docs/4.x/api/utils/set-page-layout):
+
+```ts
+setPageLayout('panel', { sidebar: true, title: 'Dashboard' })
+```
+
 ## Overriding a Layout on a Per-page Basis
 
 If you are using pages, you can take full control by setting `layout: false` and then using the `<NuxtLayout>` component within the page.

package/4.api/1.components/3.nuxt-layout.md

@@ -86,6 +86,35 @@ console.log(layoutCustomProps.title) // I am a custom layout
 </script>
 ```
 
+## Layout Props from Page Meta
+
+When using [`definePageMeta`](/docs/4.x/api/utils/define-page-meta) with the object syntax for `layout`, props are automatically passed to the layout component. The layout can receive them with `defineProps`:
+
+```vue [app/pages/dashboard.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: {
+    name: 'admin',
+    props: {
+      sidebar: true,
+    },
+  },
+})
+</script>
+```
+
+```vue [app/layouts/admin.vue]
+<script setup lang="ts">
+const props = defineProps<{
+  sidebar?: boolean
+}>()
+</script>
+```
+
+::read-more{to="/docs/4.x/directory-structure/app/layouts#passing-props-to-layouts"}
+Read more about passing props to layouts.
+::
+
 ## Transitions
 
 `<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.

package/4.api/3.utils/define-page-meta.md

@@ -38,7 +38,7 @@ interface PageMeta {
   viewTransition?: ViewTransitionPageOptions['enabled'] | ViewTransitionPageOptions
   key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
   keepalive?: boolean | KeepAliveProps
-  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
+  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey> | { name?: LayoutKey | false, props?: Record<string, unknown> /* or the selected layout's props */ }
   middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
   scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
   [key: string]: unknown
@@ -97,10 +97,12 @@ interface PageMeta {
 
   **`layout`**
 
-  - **Type**: `false` | `LayoutKey` | `Ref<LayoutKey>` | `ComputedRef<LayoutKey>`
+  - **Type**: `false` | `LayoutKey` | `Ref<LayoutKey>` | `ComputedRef<LayoutKey>` | `{ name?: LayoutKey | false; props?: Record<string, unknown> /* or the selected layout's props */ }`
 
     Set a static or dynamic name of the layout for each route. This can be set to `false` in case the default layout needs to be disabled.
 
+    You can also pass an object with `name` and `props` to pass typed props to your layout component. When your layout defines props with `defineProps`, they will be fully typed in `definePageMeta`.
+
   **`layoutTransition`**
 
   - **Type**: `boolean` | [`TransitionProps`](https://vuejs.org/api/built-in-components#transition)
@@ -245,3 +247,52 @@ definePageMeta({
 })
 </script>
 ```
+
+### Passing Props to a Layout
+
+You can pass props to a layout by using the object syntax for `layout`. If your layout defines props with `defineProps`, the props will be fully typed.
+
+::code-group
+
+```vue [app/pages/dashboard.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: {
+    name: 'panel',
+    props: {
+      sidebar: true,
+      title: 'Dashboard',
+    },
+  },
+})
+</script>
+```
+
+```vue [app/layouts/panel.vue]
+<script setup lang="ts">
+const props = defineProps<{
+  sidebar?: boolean
+  title?: string
+}>()
+</script>
+
+<template>
+  <div>
+    <aside v-if="sidebar">
+      Sidebar
+    </aside>
+    <main>
+      <h1>{{ title }}</h1>
+      <slot />
+    </main>
+  </div>
+</template>
+```
+
+::
+
+::tip
+Layout props set via `definePageMeta` are fully typed based on the layout's `defineProps`. You'll get autocomplete and type-checking in your editor.
+::
+
+:read-more{to="/docs/4.x/directory-structure/app/layouts#passing-props-to-layouts"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.4.0-29552640.096fa1dc",
+  "version": "4.4.0-29553843.0c5869c2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",