install laravel 9 inertia with svelte example

In this tutorial we will see how to install & setup svelte with inertia js in laravel 9.

Laravel Inertia Svelte Server-side setup

Create Laravel Project

Run below command to create laravel project.

composer create-project laravel/laravel inertia-svelte

Install dependencies

Install the Inertia server-side adapters using the preferred package manager for that language or framework.

composer require inertiajs/inertia-laravel

Create Root template

Next, you need to create app.blade.php file for root template.


<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>

Create Inertia Middleware

php artisan inertia:middleware

Once generated, register the HandleInertiaRequests middleware in your App\Http\Kernel, as the last item in your web middleware group.

'web' => [
    // ...

Laravel Inertia Svelte Client-side setup

Once you have your server-side framework configured, you then need to setup your client-side framework. Inertia currently provides support for Svelte.

Install svelte dependencies

npm install @inertiajs/inertia @inertiajs/inertia-svelte
yarn add @inertiajs/inertia @inertiajs/inertia-svelte

Initialize app


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

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

Install svelte-loader

npm install --save svelte svelte-loader

Add svelte loader in webpack.mix.js


const mix = require('laravel-mix');
const path = require('path')

 | Mix Asset Management
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.

    .js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            mainFields: ['svelte', 'browser', 'module', 'main'],
            alias: {
                '@': path.resolve('resources/js'),
        module: {
            rules: [
                    test: /\.(svelte)$/,
                    use: {
                        loader: 'svelte-loader',
                        options: {
                            emitCss: true,
                            hotReload: true,

Create Pages Folder in resources/js/Pages/Welcome.svelte.

laravel inertia svelte 3 folder structure

laravel inertia svelte 3 folder structure


    let title = 'Laravel Inertia with Svelte';

<h1>Hello {title}!</h1>
Laravel Inertia with Svelte

Laravel Inertia with Svelte



use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

| Web Routes
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!

Route::get('/', function () {
    return Inertia('Welcome');

Open two terminal one for php artisan serve and second for npm run watch or npm run dev.

php artisan serve

run npm:

npm run dev