dlebedef's avatar

Vite + Inertia.js persistent layouts

Has anyone figured out how to correctly set the app.js file to handle persistent layouts?

0 likes
7 replies
dlebedef's avatar
dlebedef
OP
3 years ago
Best Answer
Level 7

I managed to solve this setting the createInertiaApp function like this:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const page = resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        );

        page.then((module) => {
            module.default.layout = module.default.layout || AppLayout;
        });

        return page;
    },
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

I'm definitely not sure this is the right way so if someone knows of a better way please feel free to share :)

10 likes
Sinnbeck's avatar

@dlebedef ah sorry didn't catch that you meant default layouts. That like how >I would do it as well

1 like
benjamin661's avatar

I'm going through Jeffery's course with Vue3, Inertia and Laravel. I followed the above to implement the default Layouts. Only thing is while they seem to work okay with my custom pages - when i logout the default Breeze implemented authentication pages for login, registration only show a white page and a cryptic error in chrome dev tools.

Is there an extra bit we need to tweak in the app.js or is there anything we need to change on the Breeze created authentication templates?

AlexMuhammad's avatar

halo guys, i got some problem when i was built my app without persistent layout, it looks clearly on my public asset, but when i was trying persistent layout and built my app, it was totally different. Lot of files built on my public asset. do you have any suggestion for me about that case? im using react + ts, inertiajs and laravel 11

Oddman's avatar

@AlexMuhammad Your question/problem is rather unclear. Using terms like "different" with no details, makes it impossible to help you - can you provide clarity regarding the issue you're having?

Please or to participate in this conversation.