Pastebin | Laravel.io

#
# install inertiajs
#
composer require inertiajs/inertia-laravel

#
# install inertiajs plugins
#
npm install @inertiajs/inertia @inertiajs/inertia-svelte

#
# install sveltejs
#
npm install --save-dev @sveltejs/vite-plugin-svelte

#
# publish the HandleInertiaRequests middleware
#
php artisan inertia:middleware

#
# register the HandleInertiaRequests middleware in your App\Http\Kernel
# as the last item in your web middleware group in "app/Http/Kernel.php"
#
protected $middlewareGroups = [
    'web' => [
        // ...
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],

#
# create the "vite.config.js" file
#
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        svelte(),
    ],
});

#
# Edit the "resources/js/app.js" file content
#
import './bootstrap';

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

createInertiaApp({
  resolve: name => import(`./Pages/${name}.svelte`),
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
});

#
# create the "resources/views/app.blade.php" file
#
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<title inertia>{{ config('app.name', 'Laravel') }}</title>

@vite('resources/js/app.js')
    @inertiaHead
  </head>
   <body class="font-sans antialiased">
    @inertia
    </body>
</html>

#
# create a sample svelte page "resources/js/Pages/Svelte.svelte"
#
<script>
    export let name;
</script>

<svelte:head>
    <title>Svelte Page!</title>
</svelte:head>

<p>Hello {name}!</p>

#
# create a sample route in "routes/web.php" file to serve that page
#
Route::get('/svelte', function () {
    return \Inertia\Inertia::render('Svelte', [
        'name' => 'world',
    ]);
});