blog/creating-a-laravel-10-application-using-inertia-js-svelte-and-tailwind-css

[utterances-bot]

Rappasoft | Blog | Creating a Laravel 10 Application using Inertia JS, Svelte, and Tailwind CSS

I've been trying to branch out and try new things. Inertia and Svelte were on my list but the documentation didn't get me up and running. Here's how I solved my problems.

https://rappasoft.com/blog/creating-a-laravel-10-application-using-inertia-js-svelte-and-tailwind-css

[rotaercz]

Do you have a tutorial on how to have Svelte components placed in Laravel blade files in an island architecture? I'd like to keep Laravel blade as my default for SSR (Server Side Rendering).

[groventov]

Good work! On your opinion it is less painful to work with TALL or Laravel-Inertia-Svelte-Tailwind?

[rappasoft]

@groventov I haven't used Inertia that much but it is very nice. I would say it depends on the use case. I prefer TALL but that's just because i'm more comfortable with it. I'm also eager to see how Livewire V3 helps make that gap smaller.

[kesc23]

2024 update?

Item 2b

For laravel 11.x can be inserted in bootstrap/app,php

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->append(HandleInertiaRequests::class);
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();

Item 2e

Laravel vite plugin is not using laravel.default anymore, so you can drop the ".default"

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

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