Layout slots not working in default layout

[toniengelhardt]

Environment

Nuxt 3.0.0-rc.11

Reproduction

StackBlitz: https://stackblitz.com/edit/nuxt3-layout-slot-bug

Describe the bug

Layout slots not working with default layout, generate error (see reproduction):

Error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.

Note the use of app.vue.

Explicitly using <NuxtLayout> with layout: false in page meta works but leads to full re-render of the layout and kinda defies the purpose of a default layout.

Not sure if I'm doing something wrong with the setup, but following the docs, the code in the repro should work. Also, best in terms of DX IMO.

Additional context

This is a typical use case where you for instance have a nav and want to add additional items via a slot on specific pages.

Logs

No response

[danielroe]

Unfortunately this isn't valid vue and the only way to use custom slots is with layout: false as documented. It's a nice idea for enhancement (but would require a compiler plugin to implement, as well as tooling update in volar and other libraries).

[toniengelhardt]

@danielroe would it at least be possible to avoid re-rendering the layout if it stays the same, like in the 'this works' case?

[danielroe]

That is absolutely something on my list, and currently pending vuejs/core#6736.

(It's not currently possible due to vue behaviour, but should be once that PR merges.)

[toniengelhardt]

Amazing, thanks 🙏🏽 I think that is a feasible workaround.

[TJacoob]

Just to add to this, I think it makes some sense as an enhancement. A simple use case would be to have a layout where the screen is split in half, with a slot for each side, and in each page would pass different data to each slot.

For example, login / signup pages often follow the same layout but might have different forms on the screen, along with different texts and information.

[VladimirCores]

Could it be implemented with an additional Nuxt component, something like: <NuxtLayoutSlot name="nav-items"/> with Teleport or something else? Because its a very expected behavior, the way to propagate components to slots in NuxtLayout like in this-doesnt-work example.

[lubomirblazekcz]

@danielroe I can see that layout still re-renders even if it's the same layout, is there any workaround for this yet?

[danielroe]

@lubomirblazekcz Would you open a new issue with a reproduction?