diff --git a/packages/nuxt/src/app/components/layout.ts b/packages/nuxt/src/app/components/layout.ts index 4f3e3e11bb..4cb75e3eaf 100644 --- a/packages/nuxt/src/app/components/layout.ts +++ b/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, @@ -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() } } diff --git a/test/basic.test.ts b/test/basic.test.ts index 401edb66b5..f527fbbd25 100644 --- a/test/basic.test.ts +++ b/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', () => { diff --git a/test/fixtures/basic/layouts/with-props.vue b/test/fixtures/basic/layouts/with-props.vue new file mode 100644 index 0000000000..1d87ad7b54 --- /dev/null +++ b/test/fixtures/basic/layouts/with-props.vue @@ -0,0 +1,10 @@ + + + diff --git a/test/fixtures/basic/pages/layouts/with-props.vue b/test/fixtures/basic/pages/layouts/with-props.vue new file mode 100644 index 0000000000..e228001612 --- /dev/null +++ b/test/fixtures/basic/pages/layouts/with-props.vue @@ -0,0 +1,15 @@ + + +