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',
]);
});