Default layout doesn't work in Laravel + Vite + Svelte

userKaZ31 0
Viewed 35

I started my first project with Laravel + Vite (I already used Inertia with Laravel + Webpack) and the problem I have is the default layout. When using Webpack I could define the layout with the following code:

createInertiaApp({
    resolve: name => {
        const page = require(`../svelte/Pages/${name}.svelte`);
        if (guestPages.indexOf(name) !== -1) {
            page.layout = LayoutGuest
        } else {
            page.layout = Layout
        }
        return page
    },
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

But now, with the new Vite way, I can't get it to work. Here's the code I have:

async function resolve(name)
{
    const page = resolvePageComponent(`../svelte/Pages/${name}.svelte`, import.meta.glob('../svelte/Pages/**/*.svelte'));
    let component;
    await page
        .then(module => {
            module.default.layout = Layout;
            component = module;
        });
    return component;

I don't know if the problem is the dynamic import.

inertiajs vite svelte laravel
1 Answers

I made it work without Svelte with the following code snipped. Hope it helps and maybe you can adapt it to your needs. Im using it in a TypeScript environment, which is why I added "as any;".

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

        await page.then((module) => {
            //if name starts with auth, then use login layout
            if (name.startsWith("Auth/")) {
                module.default.layout = module.default.layout || LoginLayout;
            } else if (name.startsWith("Public/")) {
                module.default.layout = module.default.layout;
            } else {
                module.default.layout = module.default.layout || AppLayout;
            }
        });

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