named slots don't work with nested layouts #2703
Description
@inertiajs/vue3 Version
2.2.12
Backend stack (optional)
Laravel 12.38.1
vite 7.1.12
vue 3.5.22
Describe the problem
I tried to use nested persistent layouts in combination with named slots:
The error is here:
[plugin:vite:vue] Codegen node is missing for element/if/for node. Apply appropriate transforms first. /home/root/resources/js/Apps/Chatbot/Pages/Dashboard/Index.vue
Steps to reproduce
This page causes the error.
<script setup>
import { Head } from '@inertiajs/vue3'
import { addIcons } from "oh-vue-icons";
import { FaRegularPaperPlane, FaPaperclip } from "oh-vue-icons/icons";
addIcons(FaRegularPaperPlane, FaPaperclip);
// persistent layout
import Layout from '../../Layouts/AppLayout.vue'
import Background from '@/Basic/Background.vue'
defineOptions({
layout: [Background,Layout],
});
</script>
<template>
<Head title="Welcome" />
<div class="flex flex-col h-full items-center border">
<div class="w-1/2 flex-grow overflow-y-auto p-4">
<div class="mb-2">
<p class="p-2 bg-surface-100 rounded-lg inline-block">Hello, how can i help you?</p>
</div>
<div class="mb-2 text-right">
<p class="p-2 bg-primary-500 text-white rounded-lg inline-block">I have a question about a movie.</p>
</div>
</div>
</div>
<template #input>
<div class="border border-surface-400 rounded-2xl overflow-hidden bg-surface-0 flex flex-col">
<textarea
class="w-full h-24 p-4 border-none focus:ring-0 focus:outline-none bg-transparent resize-none"
placeholder="Write your message..."
></textarea>
<div class="flex items-center justify-between p-3 border-t border-surface-400 bg-surface-50">
<button
type="button"
class="p-2 rounded-full hover:bg-surface-200 text-surface-600 transition-colors"
aria-label="Attach file"
>
<v-icon name="fa-paperclip" scale="1.1" />
</button>
<button
type="submit"
class="p-2 rounded-full bg-primary-500 hover:bg-primary-600 text-white transition-colors"
aria-label="Send"
>
<v-icon name="co-paper-plane" scale="1.1" />
</button>
</div>
</div>
</template>
</template>
when i use manually nested layouts it works totally fine.
import { Head } from '@inertiajs/vue3'
import { addIcons } from "oh-vue-icons";
import { FaRegularPaperPlane, FaPaperclip } from "oh-vue-icons/icons";
addIcons(FaRegularPaperPlane, FaPaperclip);
// persistent layout
import Layout from '../../Layouts/AppLayout.vue'
import Background from '@/Basic/Background.vue'
// defineOptions({
// layout: [Background,Layout],
// });
</script>
<template>
<Head title="Willkommen" />
<Background>
<Layout>
<div class="flex flex-col h-full items-center border">
<div class="w-1/2 flex-grow overflow-y-auto p-4">
<div class="mb-2">
<p class="p-2 bg-surface-100 rounded-lg inline-block">Hello, how can i help you?</p>
</div>
<div class="mb-2 text-right">
<p class="p-2 bg-primary-500 text-white rounded-lg inline-block">I have a question about a movie.</p>
</div>
</div>
</div>
<template #input>
<div class="border border-surface-400 rounded-2xl overflow-hidden bg-surface-0 flex flex-col">
<textarea
class="w-full h-24 p-4 border-none focus:ring-0 focus:outline-none bg-transparent resize-none"
placeholder="Write your message..."
></textarea>
<div class="flex items-center justify-between p-3 border-t border-surface-400 bg-surface-50">
<button
type="button"
class="p-2 rounded-full hover:bg-surface-200 text-surface-600 transition-colors"
aria-label="Attach file"
>
<v-icon name="fa-paperclip" scale="1.1" />
</button>
<button
type="submit"
class="p-2 rounded-full bg-primary-500 hover:bg-primary-600 text-white transition-colors"
aria-label="Send"
>
<v-icon name="co-paper-plane" scale="1.1" />
</button>
</div>
</div>
</template>
</Layout>
</Background>
</template>```
I know that there is the possibility to use one slot instead, but i would like to have the option to use also two or more.
Thanks in advance
Jonas