I am trying to use Persistent Layouts in InertiaJS and Laravel with Vue3. But I get a compilation error by Vite:
[vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
I believe the issue might have something to do with <template #header> being declared directly within the root template tag.
Here is my code below.
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
defineOptions({ layout: AuthenticatedLayout })
</script>
<template>
<Head title="Systems" />
<template #header>
<h2>Settings</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">You're logged in!</div>
</div>
</div>
</div>
</template>