Laravel with Svelte

While Laravel with Svelte isn’t an “official” starter kit like React or Vue, it has become a respected community stack. Developers choose this combination for maximum performance and the smallest possible JavaScript bundles. Svelte 5 and Inertia.js 2.0 make this pairing faster and more reactive than ever.

The Modern Monolith with Svelte 5

The standard setup uses Inertia.js. Svelte is a compiler, not a runtime library, so it converts components into highly efficient, vanilla JavaScript at build time.

How It Works

• Laravel: Handles routing, database management, and security.
• Inertia 2.0: Passes data from Laravel controllers directly to Svelte components as props.
• Svelte 5: Uses Runes ($state, $derived, $effect) to update the UI instantly without a Virtual DOM.

Why Use Svelte with Laravel?

How to Start (Manual Setup)

There is no laravel new --svelte command. You must set it up manually or use a community template.

1. Install Inertia Svelte Adapter:

   npm install svelte @inertiajs/svelte

   Copy Code
2. Configure Vite:

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import { svelte } from '@sveltejs/vite-plugin-svelte';
   
   export default defineConfig({
     plugins: [
       laravel({ input: ['resources/js/app.js'], refresh: true }),
       svelte(),
     ],
   });

   Copy Code
3. Controller Flow:

   public function index() {
       return Inertia::render('Dashboard', [
           'stats' => ['users' => 1024, 'revenue' => '$50k']
       ]);
   }

   Copy Code

Svelte vs React/Vue for Laravel Developers

• Learning Curve: Svelte is easy to learn, using standard HTML, CSS, and JS.
• Ecosystem: Smaller than React, but Svelte 5 now includes shadcn-svelte for ready-to-use UI components.
• When to Choose: Ideal for applications where load speed is critical, like public-facing SaaS landing pages or complex data dashboards.