Install Laravel + Svelte + Inertia + Vite Right Way

Install Inertia Composer dependency

composer require inertiajs/inertia-laravel

Setup Middleware

php artisan inertia:middleware

Edit Your app/Http/Kernel.php and add HandleInertiaRequest at the last item

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

Create resources/views/app.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite(['resources/js/app.js', 'resources/css/app.css'])
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Install Inertia NPM Dependency

npm i svelte @inertiajs/inertia @inertiajs/inertia-svelte @inertiajs/progress

Add Inertia Plugin Vite

npm i -D @sveltejs/vite-plugin-svelte

Change vite.config.js

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

const ASSET_URL = process.env.ASSET_URL || '';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        svelte({
            experimental: {
                prebundleSvelteLibraries: true,
            },
        }),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),

    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
    optimizeDeps: {
        include: [
            '@inertiajs/inertia',
            '@inertiajs/inertia-svelte',
        ]
    }
})

Add Ziggy for Routes

npm i ziggy-js

composer require tightenco/ziggy

Add @routes above @vite

Change resources/js/app.js

import './bootstrap';

import {createInertiaApp} from '@inertiajs/inertia-svelte';
import {InertiaProgress} from '@inertiajs/progress';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';

const route = window.route;

InertiaProgress.init()

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

Add auth and flash session in /app/Http/Middleware/HandleInertiaRequests.php

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => auth()->check() ? ['user' => auth()->user()->toArray()] : null,
        'flash' => function () use ($request) {
            return [
                'success' => $request->session()->get('success'),
                'error' => $request->session()->get('error'),
            ];
        },
    ]);
}

Finish

Now, you're ready to use inertia in laravel with vite

robzlabz/install_laravel_svelte_inertia_vite.md

Select an option

No results found