Laravel domain-driven front-end with Vite

inertia-layout.ts

import type { Plugin } from 'vite'

const PLUGIN_NAME = 'vite:inertia:layout'
const TEMPLATE_LAYOUT_REGEX = /<template +layout(?: *= *['"](?:(?:(\w+):)?(\w+))['"] *)?>/

export default (): Plugin => ({
	name: PLUGIN_NAME,
	transform: (code: string) => {
		if (!TEMPLATE_LAYOUT_REGEX.test(code)) {
			return
		}

		const isTypeScript = /lang=['"]ts['"]/.test(code)

		return code.replace(TEMPLATE_LAYOUT_REGEX, (_, domainName, layoutName) => {
			const resolvedLayoutName = layoutName ?? 'default'
			const layout = domainName
				? `@/domains/${domainName}/layouts/${resolvedLayoutName}.vue`
				: `@/layouts/${resolvedLayoutName}.vue`

			return `
				<script${isTypeScript ? ' lang="ts"' : ''}>
				import layout from '${layout}'
				export default { layout }
				</script>
				<template>
			`
		})
	},
})

resolve-page-component.ts

export async function resolvePageComponent(name: string, pages: Record<string, any>, defaultLayout?: any) {
	const mapped: string[] = []
	const path = Object.keys(pages)
		.sort((a, b) => a.length - b.length)
		.find((path) => {
			mapped.push(
				path = path
					.replace('../domains/', '')
					.replace('/pages/', '/')
					.replace('.vue', '')
					.replace('/', '.'),
			)

			return path === name
		})

	if (!path) {
		throw new Error(`Page component "${name}" could not be found. Available pages: \n- ${mapped.join('\n- ')}`)
	}

	let component = typeof pages[path] === 'function'
		? await pages[path]()
		: pages[path]

	component = component.default ?? component
	component.layout ??= defaultLayout

	return component
}

Hey... Thanks for the feedback... I'm using a striped down version of this, but in my case I had to add enforce: 'pre' to the plugin export after upgrading to Vite 3.