Example of Laravel App.js Multi Template

app.js

import { createInertiaApp, Head, Link } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { createApp, h } from "vue";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

/**
 * Import Layouts to be used in the SaaS
 */
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue"
import GuestLayout from "@/Layouts/GuestLayout.vue";

const appName = window.document.getElementsByTagName ('title')[0]?.innerText;

createInertiaApp ({
	title: ( title ) => `${appName} | ${title}`,
	resolve: ( name ) => {
		const page = resolvePageComponent (
			`./Pages/${name}.vue`,
			import.meta.glob ('./Pages/**/*.vue')
		);
		page.then (( module ) => {
			if ( name.startsWith ('Guest/') ) {
				module.default.layout = GuestLayout;
			} else if ( name.startsWith ('Auth/') ) {
				module.default.layout = AuthenticatedLayout;
			}
		});

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

InertiaProgress.init ({ color: '#4B5563' });