fix(nuxt): allow layouts to receive custom props (#9395)

packages/nuxt/src/app/components/layout.ts

@@ -11,6 +11,7 @@ import { appLayoutTransition as defaultLayoutTransition } from '#build/nuxt.conf
 
 // TODO: revert back to defineAsyncComponent when https://github.com/vuejs/core/issues/6638 is resolved
 const LayoutLoader = defineComponent({
+  inheritAttrs: false,
   props: {
     name: String,
     ...process.dev ? { hasTransition: Boolean } : {}
@@ -32,14 +33,15 @@ const LayoutLoader = defineComponent({
 
     return () => {
       if (process.dev && process.client && props.hasTransition) {
-        vnode = h(LayoutComponent, {}, context.slots)
+        vnode = h(LayoutComponent, context.attrs, context.slots)
         return vnode
       }
-      return h(LayoutComponent, {}, context.slots)
+      return h(LayoutComponent, context.attrs, context.slots)
     }
   }
 })
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     name: {
       type: [String, Boolean, Object] as unknown as () => string | false | Ref<string | false>,
@@ -74,7 +76,7 @@ export default defineComponent({
 
       // We avoid rendering layout transition if there is no layout to render
       return _wrapIf(Transition, hasLayout && transitionProps, {
-        default: () => _wrapIf(LayoutLoader, hasLayout && { key: layout.value, name: layout.value, hasTransition: process.dev ? !!transitionProps : undefined }, context.slots).default()
+        default: () => _wrapIf(LayoutLoader, hasLayout && { key: layout.value, name: layout.value, hasTransition: process.dev ? !!transitionProps : undefined, ...context.attrs }, context.slots).default()
       }).default()
     }
   }

test/basic.test.ts

@@ -403,6 +403,11 @@ describe('layouts', () => {
     expect(html).toContain('Custom Layout:')
     await expectNoClientErrors('/with-dynamic-layout')
   })
+  it('should allow passing custom props to a layout', async () => {
+    const html = await $fetch('/layouts/with-props')
+    expect(html).toContain('some prop was passed')
+    await expectNoClientErrors('/layouts/with-props')
+  })
 })
 
 describe('reactivity transform', () => {

test/fixtures/basic/layouts/with-props.vue

@@ -0,0 +1,10 @@
+<template>
+  <p>{{ someProp }}</p>
+  <slot />
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  someProp: string;
+}>()
+</script>

test/fixtures/basic/pages/layouts/with-props.vue

@@ -0,0 +1,15 @@
+<script setup>
+definePageMeta({
+  layoutTransition: false
+})
+</script>
+
+<template>
+  <div>
+    <NuxtLayout name="with-props" some-prop="some prop was passed">
+      <div>
+        some page content
+      </div>
+    </NuxtLayout>
+  </div>
+</template>