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.

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" />
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    <script src="{{ mix('/js/app.js') }}" defer></script>
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

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' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],


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

resources/js/app.js

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

createInertiaApp({
  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

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.
 |
 */

mix
    .js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
    ])
    .webpackConfig({
        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

resources/js/Pages/Welcome.svelte

<script>
    let title = 'Laravel Inertia with Svelte';
</script>

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

Laravel Inertia with Svelte

routes/web.php

<?php

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