Inertia.js is a powerful framework that allows you to build modern, reactive single-page applications using Laravel and your favorite front-end frameworks, such as Svelte, React, and Vue.js. Inertia.js provides the benefits of server-side rendering while still allowing you to write your front-end code using the syntax and tools you already know and love. With Inertia.js and Laravel, you can build high-performance web applications quickly and easily, without the need for a separate API layer or complex data binding strategies.

I assume that you have already installed Laravel on your local machine. Now we have to start server side configuration.

composer require inertiajs/inertia-laravel

Once the inertia package for Laravel is installed, add a root template on your views folder. Create app.blade.php and add the below code to the created root file.

<!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')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Next run the inertiaJs middleware command to publish middleware

php artisan inertia:middleware

To use the HandleInertiaRequests middleware in your Laravel project, first publish the middleware using the appropriate command. Once the middleware has been published, you can register it in your App\Http\Kernel file by adding it as the last item in the web middleware group. This ensures that Inertia.js handles the incoming requests before they are passed to any other middleware in the group.

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

After the above process, lets begin client side setup. First we start by adding npm dependencies to our project.

npm install @inertiajs/svelte

Once the above process is completed, add the below code to /resources/js/app.js

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
    return pages[`./Pages/${name}.svelte`]
  },
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})

Now we have to edit vite config file on vite.congig.js. Remove laravel plugin code and add the below code.

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

export default defineConfig({
    plugins: [
        laravel.default({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        svelte({}),
    ],
});

Last but not least, we have to do 1 more step. add     “type”: “module”, on your package.json and add below line on your devDependencies

"@sveltejs/vite-plugin-svelte": "2.0.3",

NOTE: Please find the sample package.json below

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "@sveltejs/vite-plugin-svelte": "2.0.3",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "@inertiajs/svelte": "^1.0.2"
    }
}

Categorized in:

Advanced TopicBasic TutorialExamples