Default layout and code-splitting

[beard7]

I've setup a default layout following the documentation for Vite. It's working perfectly.

However, I now need to use the code-splitting option and I can't get the default layout to play nicely when using code-splitting.

Is this possible? If so, can somebody please show how the resolve method should look when trying to combine the two?

Thanks

[datlechin]

Sample code here: https://github.com/flivstack/flivstack/blob/main/resources/js/app.ts

[beard7]

Thanks. But I don't see any implementation of a default layout?

[MattBromley98]

There is a guide here for Vue, if that's is what you're after? :)

https://advanced-inertia.com/blog/persistent-layouts

[drfcozapata]

Hello!
You are going to develop the default layout as you normally do in Vue. There is no difference.
You create DefaultLayout.vue and from this you import and use the components you need; for example: Navbar.vue, Sidebar.vue and Footer.vue.
In the slot that you are going to leave in the layout is where the different components of the application are going to be rendered.
I usually create a Layout.vue with the following code:

<script setup>
import { RouterView } from “vue-router”;
import DefaultLayout from “@/components/layout/DefaultLayout.vue”;
</script>

<template>
	<DefaultLayout>
		<RouterView />
	</DefaultLayout>
</template>

I put Layout.vue in the resources/js/Pages directory. In the resources/js/components/layout/partials directory I create the files that I then import into DefaultLayout.vue.
As you can see, there is no difference in that sense. The difference comes later, when you start using the backend data. There you will have to use Inertia, but even in the backend development and the logic in the controllers, models, middlewares, etc. there is no difference with the way you usually work with Laravel. Only with the way of sending the information to the frontend using Inertia.
I suggest you create a project using 'laravel new project-name' and when creating the scafolding select 'Laravel Breeze' or ' 'Laravel Jetstream' and then 'Vue with Inertia'. When you have the completed project, review it in detail to see how Breeze and Jetstream handle the creation and use of the default layout.
In any case, the best place to start solving any problem with a framework or library is its documentation. Inertia's explains the point you want to clarify here: https://inertiajs.com/pages
I hope this information helps you. Best of success!

[beard7]

Thanks for all the suggestions, but I don't have any issue getting the default layout to work.

My issue is that it stops working when trying to implement code-splitting, which is not covered by any of your suggestions.

The resolve method of my working setup looks like this (straight out of the Interia docs):

resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
        let page = pages[`./Pages/${name}.vue`];
        page.default.layout = name.startsWith('Auth/') ? undefined : AppLayout;
        return page;
}

I can also also implement code-splitting (again, straight out of the Inertia docs), without the default layout:

resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: false });
        let page = pages[`./Pages/${name}.vue`]();
        return page;
}

Combining the two is when the problem starts:

resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: false });
        let page = pages[`./Pages/${name}.vue`]();
        page.default.layout = name.startsWith('Auth/') ? undefined : AppLayout;
        return page;
}

This gives an error: Cannot set properties of undefined (setting 'layout')

[drfcozapata]

Ok. The problem you have occurs because the object 'page' you are trying to modify is 'undefined'. This happens if the import of the component has not been resolved correctly.
When you use 'eager: false', 'page' becomes a promise, and you need to wait for it to resolve before trying to access its properties. Here is a way to fix your code:

resolve: async name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: false });
    let page = await pages[`./Pages/${name}.vue`]();
    page.default.layout = name.startsWith('Auth/') ? undefined : AppLayout;
    return page;
}

That code should help you solve the problem. I hope it helps.

[beard7]

Brilliant. That's done the trick. Thank you!

[drfcozapata]

I'm glad I could help you. Blessings