How to use Svelte with Inertia.js v1.0

The big new release of Inertia comes with server-side rendering support for Svelte, among other improvements. However, Svelte is a second-class citizen in the documentation. There are first-party versions of Laravel Breeze written in Vue and React that make it easy to get up and running with Inertia. Svelte users are not so lucky.

Installing Laravel

You can skip this if you’re adding Inertia to an existing project.

composer create-project laravel/laravel example-app

Installing Inertia

Install the Inertia composer package

composer require inertiajs/inertia-laravel

Create your app’s base template at 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')
    @inertiaHead
</head>

<body>
    @inertia
</body>

</html>

Publish Inertia’s middleware.

php artisan inertia:middleware

Add the middleware as the last item in the the web middleware group in app/Http/Kernel.php.

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

Installing Svelte

Install a few packages, including Svelte itself (this isn’t mentioned at all in the documentation).

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

Create the resources/js/app.js file required by Inertia.

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 });
    }
});

Make the following changes to vite.config.js:

Change laravel( to laravel.default(
Add svelte() to the array, after Laravel

Add "type": "module" to your package.json file

{
    "private": true,
    "type": "module",
    "scripts": {...},
    "devDependencies": {...}
}

If you don’t make this change, you might encounter this error:

Failed to resolve entry for package “@sveltejs/vite-plugin-svelte”. The package may have incorrect main/module/exports specified in its package.json: No known conditions for ”.” entry in “@sveltejs/vite-plugin-svelte” package

Bonus: Installing Tailwind

Add @vite('resources/css/app.css') to app.blade.php.

Install Tailwind and its dependencies.

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Edit tailwind.config.cjs.

/** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [
         './resources/**/*.{php,js,svelte}'
     ],
     theme: {
         extend: {}
     },
     plugins: []
 }

Add the three Tailwind directives to resources/css/app.css.

@tailwind base;
@tailwind components;
@tailwind utilities;