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 'tailwindcss'
import autoprefixer from 'autoprefixer'
import createDebugger from 'debug'
import { defineConfig } from 'laravel-vite'

export default defineConfig()
	.withPlugin(inspect)
	.withPlugin(icons({ iconDirs: [path.resolve(process.cwd(), 'resources/icons')] }) as any)
	.withPlugin(() => ({
		name: 'vite:inertia:layout',
		transform: (code: string, id: string) => {
			if (!/<template +layout *= *['"](\w+)['"] *>/.test(code)) {
				return
			}
			
			const layouts = '@/views/layouts/'
			const debug = createDebugger('vite:inertia:layout')
			const isTypeScript = /lang=['"]ts['"]/.test(code)

			return code.replace(/<template +layout *= *['"](\w+)['"] *>/, (_, layoutName) => {
				debug(`Using custom Inertia layout (${layoutName}) for SFC: ${id}`)

				return `
					<script${isTypeScript ? ' lang="ts"' : ''}>
					import layout from '${layouts}${layoutName}.vue'
					export default { layout }
					</script>
					<template>
				`
			})
		},
	}))
	.withPlugin(vue)
	.withPostCSS([tailwindcss, autoprefixer])
	.withCertificates()