inertia-layout.ts

import { Plugin } from 'vite'

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

export default (layouts: string = '@/views/layouts/'): 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, (_, layoutName) => `
			<script${isTypeScript ? ' lang="ts"' : ''}>
			import layout from '${layouts}${layoutName}.vue'
			export default { layout }
			</script>
			<template>
		`)
	},
})

main.ts

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import 'tailwindcss/tailwind.css'

function withVite(pages: Record<string, any>, name: string) {
	for (const path in pages) {
		if (path.endsWith(`${name.replace('.', '/')}.vue`)) {
			return typeof pages[path] === 'function' 
				? pages[path]()
				: pages[path]
		}
	}

	throw new Error('Page not found: ' + name)
}

createInertiaApp({
	resolve: (name) => withVite(import.meta.glob('../views/pages/**/*.vue'), name),
	setup({ el, app, props, plugin }) {
		createApp({ render: () => h(app, props) })
			.use(plugin)
			.mount(el)
	},
})

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "types": [
            "vite/client"
        ],
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "resources/*"
            ],
            "*": [
                "types/*.d.ts"
            ]
        }
    },
    "include": [
        "resources/**/*"
    ],
    "exclude": [
        "public/**/*",
        "node_modules",
        "vendor"
    ]
}

vite.config.ts

import path from 'path'
import vue from '@vitejs/plugin-vue'
import icons from 'vite-plugin-svg-icons'
import inspect from 'vite-plugin-inspect'
import tailwindcss from 'vite-plugin-windicss'
import { defineConfig } from 'laravel-vite'
import inertiaLayout from './resources/scripts/vite/inertia-layout'

export default defineConfig()
	.withPlugin(inspect)
	.withPlugin(icons({
		iconDirs: [path.resolve(process.cwd(), 'resources/icons')],
		symbolId: 'icon:[dir]:[name]',
	}))
	.withPlugin(inertiaLayout)
	.withPlugin(vue)
	.withPlugin(tailwindcss)
	.withCertificates()