Vue3: Global Persistent layout not working

[pmochine]

It's weird! If I call the layout locally everything works fine, but globally not.

Have a look:

..

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

import BaseLayout from './Layouts/TestLayout.vue';

createInertiaApp({
    resolve: (name) => {
        const page = import(`./Pages/${name}`);
        page.layout = page.layout || BaseLayout;
        console.log(page); // Just testing if the layout is loaded (and it is)
        return page;
    },
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin(...);
        });
        // registerComponents(vueApp);
        vueApp.mount(el);
    },
});


...

With TestLayout:

<template>
    <main>
        <header>
            <inertia-link href="/">
                Home
            </inertia-link>
            <inertia-link href="/about">
                About
            </inertia-link>
            <inertia-link href="/contact">
                Contact
            </inertia-link>
        </header>
        <article>
            <slot />
        </article>
    </main>
</template>

The console output is correct:

Promise {<pending>}
layout:
render: ƒ render(_ctx, _cache)
__file: "resources/js/Layouts/TestLayout.vue"
__proto__: Object
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Module

I'm using composition API everywhere, but this should not be the problem.

<template>
    I should be wrapped in layout
</template>

<script setup>
defineProps({
    sessions: {
        type: Array,
        required: true,
    },
});
</script>

[reinink]

Yeah, I think this might have to do with using <script setup>. See more here: #651