How to setup Laravel app with Svelte and Inertia.js – Full Guide

Laravel is a popular PHP framework for building web applications. Svelte is a modern JavaScript framework for building interactive web applications. Inertia.js is a library that allows you to use server-side routing in your client-side applications.

Step 1: Install Laravel

First, you need to install Laravel on your local machine. You can do this by running the following command in your terminal:

composer create-project --prefer-dist laravel/laravel my-laravel-app

Step 2: Install Inertia.js

Next, you need to install Inertia.js in your Laravel app. You can do this by running the following command:

composer require inertiajs/inertia-laravel

Step 3: Install Svelte

Install Svelte in your Laravel app by running the following command:

npm install svelte

Step 4: Setup Inertia.js and Svelte

Now, you need to setup Inertia.js and Svelte in your Laravel app. In your routes/web.php file, define a route that uses the inertia() method and pass the Svelte component to it:

Route::get('/dashboard', function () { return inertia('Dashboard', ['prop' => 'value']); });

Step 5: Create Svelte component

Create a Svelte component in your resources/js/components directory. You can create a simple component like this:

<script>
export let prop;
</script>

<h1>Hello, {prop}!</h1>

Step 6: Render the Svelte component

In your resources/js/app.js file, import the Svelte component and render it using Inertia.js like this:

import { InertiaApp } from '@inertiajs/inertia-svelte';
import { SvelteComponent } from 'svelte';

new InertiaApp({
target: el,
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => import(`@/Pages/${name}.svelte`).then(module => module.default)
}
});

Step 7: Build and run your app

Finally, build and run your Laravel app with Svelte and Inertia.js by running the following command:

npm run dev

That’s it! You have successfully setup a Laravel app with Svelte and Inertia.js. Now, you can start building interactive web applications with ease.