otakuryo · April 29, 2023 22:55
diff --git a/_Setup.md b/_Setup.md
diff --git a/app.blade.php b/app.blade.php
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        <!-- ViteConfiguration -->
        @vite('resources/js/appSvelte.js')
        @inertiaHead
        
    </head>
    <body>
        <!-- Vite Configuration -->
        @inertia
    </body>
 </html>
diff --git a/appSvelte.js b/appSvelte.js
 import './bootstrap';

 import { createInertiaApp } from '@inertiajs/inertia-svelte'

 import { Inertia } from "@inertiajs/inertia";

 createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
        return pages[`./Pages/${name}.svelte`]
    },
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
 })
diff --git a/kernel.php b/kernel.php
 class Kernel extends HttpKernel
 {
    
    protected $middlewareGroups = [
        'web' => [
            // ...
            \App\Http\Middleware\HandleInertiaRequests::class,
        ],

        'api' => [
          // ...
        ],
    ];

 }
diff --git a/Setup innertia + Svelte on Laravel b/Setup innertia + Svelte on Laravel
 Setup innertia + Svelte on Laravel 10
diff --git a/vite.config.js b/vite.config.js
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import { svelte } from '@sveltejs/vite-plugin-svelte';

 export default defineConfig({
    plugins: [
        laravel.default({
            input: ['resources/css/app.css', 'resources/js/appSvelte.js'],
            refresh: true,
        }),
        svelte({})
    ],
 });
diff --git a/Welcome.svelte b/Welcome.svelte
 <script>
    export let name = 'Not name.';
    const saludo = "Hi Agustin!";
    let counter = 1;
    const onClick = () => counter++;
 </script>

 <h1>{saludo}</h1>
 <button on:click={onClick}>Counter: {counter}</button>
 <p>{name}</p>
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Laravel</title>

	<!-- Fonts -->
	<link rel="preconnect" href="https://fonts.bunny.net">
	<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

	<!-- ViteConfiguration -->
	@vite('resources/js/appSvelte.js')
	@inertiaHead

	</head>
	<body>
	<!-- Vite Configuration -->
	@inertia
	</body>
	</html>
	import './bootstrap';

	import { createInertiaApp } from '@inertiajs/inertia-svelte'

	import { Inertia } from "@inertiajs/inertia";

	createInertiaApp({
	resolve: name => {
	const pages = import.meta.glob('./Pages/*/.svelte', { eager: true })
	return pages[`./Pages/${name}.svelte`]
	},
	setup({ el, App, props }) {
	new App({ target: el, props })
	},
	})
	class Kernel extends HttpKernel
	{

	protected $middlewareGroups = [
	'web' => [
	// ...
	\App\Http\Middleware\HandleInertiaRequests::class,
	],

	'api' => [
	// ...
	],
	];

	}
	import { defineConfig } from 'vite';
	import laravel from 'laravel-vite-plugin';
	import { svelte } from '@sveltejs/vite-plugin-svelte';

	export default defineConfig({
	plugins: [
	laravel.default({
	input: ['resources/css/app.css', 'resources/js/appSvelte.js'],
	refresh: true,
	}),
	svelte({})
	],
	});
	<script>
	export let name = 'Not name.';
	const saludo = "Hi Agustin!";
	let counter = 1;
	const onClick = () => counter++;
	</script>

	<h1>{saludo}</h1>
	<button on:click={onClick}>Counter: {counter}</button>
	<p>{name}</p>