| |
| |
| |
| composer require inertiajs/inertia-laravel |
| |
| |
| |
| |
| |
| npm install @inertiajs/inertia @inertiajs/inertia-svelte |
| |
| |
| |
| |
| |
| npm install --save-dev @sveltejs/vite-plugin-svelte |
| |
| |
| |
| |
| |
| php artisan inertia:middleware |
| |
| |
| |
| |
| |
| |
| protected $middlewareGroups = [ |
| 'web' => [ |
| // ... |
| \App\Http\Middleware\HandleInertiaRequests::class, |
| ], |
| |
| |
| |
| |
| |
| 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(), |
| ], |
| }); |
| |
| |
| |
| |
| |
| 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 }) |
| }, |
| }); |
| |
| |
| |
| |
| |
| <!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> |
| |
| |
| |
| |
| |
| <script> |
| export let name; |
| </script> |
| |
| <svelte:head> |
| <title>Svelte Page!</title> |
| </svelte:head> |
| |
| <p>Hello {name}!</p> |
| |
| |
| |
| |
| |
| Route::get('/svelte', function () { |
| return \Inertia\Inertia::render('Svelte', [ |
| 'name' => 'world', |
| ]); |
| }); |