Laravel Inertia - Prevent chatbox from reloading on page change with Persistent layouts

Hi there,

I have a chatbox in a Laravel Inertia setup reloading on every page change. To prevent this reloading I found that Persistent layouts should do the trick.

I already read this thread: https://laracasts.com/discuss/channels/code-review/keep-video-playing-while-switching-pages-inertiavuelaravel

And this: https://inertiajs.com/pages#persistent-layouts.

But I can't figure out how to make it work.

Every Inertia page imports the ApplLayout component like this:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/FrontendAppLayout";

export default defineComponent({
    ...
    components: {
        AppLayout,
    },
    ...
});

One of the things I tried was the following in FrontendAppLayout.vue

import ChatBox from "@/Components/Messages/ChatBox";
export default defineComponent({
    ...
    layout: (h, page) => h(ChatBox, () => child),
    ...
});

But that didn't work. The chatbox does not show op. So I tried the following in app.js:

import ChatBox from "@/Components/Messages/ChatBox.vue";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,

    // resolve: (name) => require(`./Pages/${name}.vue`),

    resolve: name => {
        const page = require(`./Pages/${name}.vue`).default
        page.layout = page.layout || ChatBox
        return page
    },
    
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(store)
            .mixin({ methods: { route } })
            .mixin(translations)
            .mixin(can)
            .mount(el);
    },
});

But this shows only the chatbox and not the AppLayout.

Does anyone see what I'm overlooking here?