Introducción a Svelte — Fundamentos para usarlo con Inertia × Laravel

¿Qué es Svelte?

Svelte ocupa una posición única entre los frameworks JavaScript. Mientras React o Vue funcionan como bibliotecas de runtime, Svelte actúa como compilador. Como convierte los componentes en JavaScript puro en tiempo de build, no hace falta enviar al navegador código extra del framework. La mayor característica de Svelte es que no usa Virtual DOM. Cuando cambia el estado, el código generado por Svelte en tiempo de compilación actualiza directamente el DOM. Con ello se consigue una UI muy ligera y rápida.

En esta página se explica la combinación de Svelte 5 e Inertia v3. Los starter kits de Laravel 13 usan esta configuración por defecto.

Runes de Svelte 5

En Svelte 5 (lanzado en 2024) se introdujo un nuevo sistema de reactividad llamado runes. Se declaran estados reactivos usando funciones especiales (runes) como $state, $derived o $effect. A diferencia de la reactividad implícita anterior a Svelte 4, el diseño es explícito y más predecible.

<script lang="ts">
    let count = $state(0)

    function increment() {
        count++
    }
</script>

<button onclick={increment}>{count}</button>

El starter kit de Svelte de Laravel usa Svelte 5 + TypeScript como estándar. Todos los ejemplos de esta página también están en TypeScript (lang="ts").

Posición dentro de Laravel

Historia

La relación entre Svelte y Laravel es muy reciente en comparación con Vue y React; el primer soporte oficial es su adopción en los starter kits oficiales. Con la adición oficial de Svelte a los starter kits en Laravel 13 (2026), Svelte pasó a ser una de las opciones oficiales de frontend en el ecosistema Laravel. Se trata en igualdad de condiciones que Vue y React, y se puede seleccionar en el prompt interactivo de laravel new. Es un framework aún poco conocido entre los usuarios Laravel, pero sus características son bundles ligeros gracias al compilador y sintaxis sencilla; al pasar desde Vue o React, puede sorprender la poca cantidad de código a escribir.

Estilo dominante actual: Inertia × Svelte

El uso central de Svelte en Laravel actualmente es Inertia × Svelte. Inertia permite realizar una arquitectura de “monolito moderno” en la que se pasan datos directamente desde los controladores de Laravel a componentes Svelte sin diseñar una API.

Configuración

Vía starter kit (recomendado)

Al iniciar un proyecto nuevo, usar el starter kit es lo más sencillo.

laravel new my-app

Si eliges Svelte en el prompt interactivo, se configura automáticamente todo lo siguiente.

inertiajs/inertia-laravel (adaptador del lado servidor)
@inertiajs/svelte (adaptador del lado cliente)
svelte + @sveltejs/vite-plugin-svelte (Svelte 5 y plugin de Vite)
TypeScript + svelte-check
Tailwind CSS + biblioteca de componentes shadcn-svelte
Middleware HandleInertiaRequests
Pantallas de autenticación como login y registro (ya implementadas con Inertia + Svelte + TypeScript)

Instalación manual

Si vas a añadirlo a un proyecto existente, instala por separado el lado servidor y el lado cliente.

# Lado servidor (PHP)
composer require inertiajs/inertia-laravel

# Lado cliente (JavaScript)
npm install @inertiajs/svelte @inertiajs/vite svelte
npm install --save-dev @sveltejs/vite-plugin-svelte svelte-check typescript

A continuación, añade el plugin de Svelte y el plugin de Vite de Inertia en vite.config.ts.

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

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

Arranca la app Inertia en resources/js/app.ts. Como el plugin @inertiajs/vite resuelve y monta automáticamente las páginas, basta con un entry point mínimo.

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp()

Para los detalles de la instalación manual (configuración de la plantilla raíz, registro del middleware, etc.), consulta la documentación oficial de Inertia.

Estructura de directorios

En los starter kits, los componentes de página de Svelte se colocan en el directorio resources/js/pages/.

resources/js/
├── app.ts             # Punto de entrada de la app Inertia
├── components/        # Componentes de UI reutilizables
│   └── ui/            # Componentes shadcn-svelte
├── layouts/           # Componentes de layout
│   ├── AppLayout.svelte
│   └── AuthLayout.svelte
├── lib/               # Utilidades y módulos de runes de Svelte
├── pages/             # Componentes de página de Inertia (corresponden al nombre del controlador)
│   ├── auth/
│   │   ├── Login.svelte
│   │   └── Register.svelte
│   ├── Dashboard.svelte
│   └── posts/
│       ├── Index.svelte
│       ├── Create.svelte
│       └── Show.svelte
└── types/             # Definiciones de tipo TypeScript

Cuando escribes Inertia::render('posts/Index', [...]), el componente correspondiente es resources/js/pages/posts/Index.svelte.

Estructura básica de un archivo Svelte

Un archivo .svelte se compone de tres bloques: <script>, plantilla y <style>.

<script lang="ts">
    // Lógica (TypeScript)
    let name = $state('Laravel')
</script>

<!-- Plantilla (notación tipo HTML) -->
<h1>Hello, {name}!</h1>

<style>
    /* CSS con scope (se aplica solo a este componente) */
    h1 {
        color: #ff2d20;
    }
</style>

Tiene una estructura parecida al Single File Component (SFC) de Vue, pero se caracteriza por escribir menos código de plantilla y script. Como <style> está limitado a un scope por defecto, no hay que preocuparse por colisiones de nombres de clase.

Sintaxis de plantilla

Interpolación de variables y expresiones

Dentro de la plantilla se usa {} para incrustar valores o expresiones de JavaScript.

<script lang="ts">
    let name = $state('mundo')
    let count = $state(3)
</script>

<p>Hola, {name}!</p>
<p>El doble es {count * 2}</p>

`{#if}` — Condicionales

<script lang="ts">
    let isLoggedIn = $state(false)
    let role = $state('editor')
</script>

{#if isLoggedIn}
    <p>¡Bienvenido!</p>
{:else if role === 'admin'}
    <p>Sesión iniciada como administrador</p>
{:else}
    <a href="/login">Iniciar sesión</a>
{/if}

Equivale a v-if / v-else de Vue o al operador ternario de React.

`{#each}` — Renderizado de listas

<script lang="ts">
    type Post = { id: number; title: string }
    let posts = $state<Post[]>([
        { id: 1, title: 'Primera publicación' },
        { id: 2, title: 'Segunda publicación' },
    ])
</script>

<ul>
    {#each posts as post (post.id)}
        <li>{post.title}</li>
    {/each}
</ul>

(post.id) indica la key y se usa para diff eficiente. Equivale a v-for de Vue o a Array.map() de React.

`bind:` — Binding bidireccional

Con bind:value puedes sincronizar bidireccionalmente el valor de un elemento de formulario con una variable reactiva.

<script lang="ts">
    let title = $state('')
    let agreed = $state(false)
    let role = $state('viewer')
</script>

<!-- Entrada de texto -->
<input bind:value={title} type="text" />
<p>Escribiendo: {title}</p>

<!-- Checkbox -->
<input bind:checked={agreed} type="checkbox" />
<p>Aceptado: {agreed}</p>

<!-- Select -->
<select bind:value={role}>
    <option value="viewer">Lector</option>
    <option value="editor">Editor</option>
    <option value="admin">Administrador</option>
</select>

Equivale a v-model de Vue. En React había que escribir a mano los handlers onChange, pero en Svelte se hace de forma declarativa con bind:.

Fundamentos del componente de página

Los componentes de página de Inertia son componentes Svelte normales. Los datos pasados desde el controlador de Laravel se reciben como props.

Controlador

// app/Http/Controllers/PostController.php
use Inertia\Inertia;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        return Inertia::render('posts/Index', [
            'posts' => Post::latest()->paginate(10),
        ]);
    }
}

Componente de página Svelte

En Svelte 5 se reciben las props con la rune $props().

<!-- resources/js/pages/posts/Index.svelte -->
<script lang="ts">
    import { Link } from '@inertiajs/svelte'

    type Post = {
        id: number
        title: string
        created_at: string
    }

    type Props = {
        posts: {
            data: Post[]
        }
    }

    let { posts }: Props = $props()
</script>

<div>
    <h1>Lista de publicaciones</h1>
    {#each posts.data as post (post.id)}
        <article>
            <h2>
                <Link href={`/posts/${post.id}`}>{post.title}</Link>
            </h2>
            <p>{post.created_at}</p>
        </article>
    {/each}
</div>

Solo con recibir las props con $props() puedes usar en la plantilla los datos pasados desde el controlador. No hace falta definir una API REST.

Componente `Link`

Al usar el componente <Link> que ofrece @inertiajs/svelte, la navegación entre páginas se hace por XHR y se evita la recarga completa del navegador.

<script lang="ts">
    import { Link } from '@inertiajs/svelte'
</script>

<!-- Enlace básico -->
<Link href="/posts">Lista de publicaciones</Link>

<!-- Enlace con método POST (para borrar, etc.) -->
<Link href="/posts/1" method="delete" as="button">
    Borrar
</Link>

<!-- Preload (precarga al pasar el ratón) -->
<Link href="/posts/1" preload>Ver publicación</Link>

Se escribe igual que una etiqueta <a> normal, pero por debajo Inertia solo cambia el componente de página, con lo que se logra una sensación de operación como en una SPA.

Componente `Form`

El componente <Form> que ofrece @inertiajs/svelte es el estilo recomendado de envío de formularios que se usa en las pantallas de autenticación del starter kit. Se indican action y method como props, y el contenido interno se describe con {#snippet}.

Uso básico

<script lang="ts">
    import { Form } from '@inertiajs/svelte'
</script>

<Form action="/posts" method="post" class="flex flex-col gap-4">
    {#snippet children({ errors, processing })}
        <div>
            <label for="title">Título</label>
            <input id="title" name="title" type="text" required />
            {#if errors.title}
                <p class="error">{errors.title}</p>
            {/if}
        </div>

        <div>
            <label for="content">Contenido</label>
            <textarea id="content" name="content"></textarea>
            {#if errors.content}
                <p class="error">{errors.content}</p>
            {/if}
        </div>

        <button type="submit" disabled={processing}>
            {processing ? 'Enviando...' : 'Publicar'}
        </button>
    {/snippet}
</Form>

{#snippet children({ errors, processing })} es la sintaxis de snippet de Svelte: un bloque de contenido que se pasa al componente (equivale a los slots de Vue o los render props de React). errors y processing los calcula automáticamente el componente Form. En los campos del formulario, en lugar de bind:value, se usa el atributo nativo name de HTML, y funciona la recolección estándar de datos de formulario del navegador.

Patrón del starter kit

El starter kit gestiona las rutas como objetos usando Wayfinder. store.form() devuelve un objeto que incluye action y method del objeto de ruta, y se aplica al <Form> con spread.

<script lang="ts">
    import { Form } from '@inertiajs/svelte'
    import { store } from '@/routes/login'
</script>

<Form
    {...store.form()}
    resetOnSuccess={['password']}
    class="flex flex-col gap-6"
>
    {#snippet children({ errors, processing })}
        <!-- Contenido del formulario -->
    {/snippet}
</Form>

Los campos indicados en resetOnSuccess se resetean automáticamente al enviar con éxito. Se indican en campos que se quieren dejar vacíos tras el envío, como la contraseña.

Si no usas Wayfinder, pasando directamente la URL con action="/login" funciona igual.

Hook `useForm`

Para el procesamiento de formularios se usa el hook useForm de @inertiajs/svelte. La gestión del estado del formulario, el envío y la visualización de errores de validación se implementan de forma sencilla.

Lado del controlador

// app/Http/Controllers/PostController.php
class PostController extends Controller
{
    public function store(Request $request)
    {
        $validated = $request->validate([
            'title'   => ['required', 'string', 'max:255'],
            'content' => ['required', 'string'],
        ]);

        Post::create($validated + ['user_id' => auth()->id()]);

        return redirect()->route('posts.index')
            ->with('success', 'Se ha creado la publicación.');
    }
}

Componente de formulario Svelte

<!-- resources/js/pages/posts/Create.svelte -->
<script lang="ts">
    import { useForm } from '@inertiajs/svelte'

    const form = useForm({
        title: '',
        content: '',
    })

    function submit(e: SubmitEvent) {
        e.preventDefault()
        form.post('/posts')
    }
</script>

<form onsubmit={submit}>
    <div>
        <label>Título</label>
        <input type="text" bind:value={form.data.title} />
        {#if form.errors.title}
            <p class="error">{form.errors.title}</p>
        {/if}
    </div>

    <div>
        <label>Contenido</label>
        <textarea bind:value={form.data.content}></textarea>
        {#if form.errors.content}
            <p class="error">{form.errors.content}</p>
        {/if}
    </div>

    <button type="submit" disabled={form.processing}>
        {form.processing ? 'Enviando...' : 'Publicar'}
    </button>
</form>

Resumen de las principales propiedades del objeto que devuelve useForm.

Propiedad / Método	Descripción
`form.data`	Objeto de datos del formulario
`form.errors`	Errores de validación (acceso por nombre de campo)
`form.processing`	`true` durante el envío (útil para desactivar el botón)
`form.isDirty`	`true` si se ha cambiado respecto al valor inicial
`form.post(url)`	Enviar con petición POST
`form.put(url)`	Enviar con petición PUT (actualización)
`form.delete(url)`	Enviar con petición DELETE
`form.reset()`	Resetear el formulario a los valores iniciales

Cuando se devuelve un error de validación, useForm mantiene el contenido introducido y muestra el error. Combinado con bind:value se logra una experiencia de formulario sin fisuras.

Datos compartidos (Shared Data)

Los datos comunes a todas las páginas (información del usuario autenticado, mensajes flash, etc.) se definen en el método share() del middleware HandleInertiaRequests.

// app/Http/Middleware/HandleInertiaRequests.php
use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            'auth' => [
                'user' => $request->user()
                    ? $request->user()->only('id', 'name', 'email')
                    : null,
            ],
            'flash' => [
                'success' => $request->session()->get('success'),
                'error'   => $request->session()->get('error'),
            ],
        ]);
    }
}

Para acceder a los datos compartidos desde un componente Svelte se usa usePage().

<script lang="ts">
    import { usePage } from '@inertiajs/svelte'

    type SharedProps = {
        auth: {
            user: { id: number; name: string; email: string } | null
        }
        flash: {
            success: string | null
            error: string | null
        }
    }

    const page = usePage<SharedProps>()
</script>

<header>
    {#if page.props.auth.user}
        <span>{page.props.auth.user.name}</span>
    {:else}
        <span>Invitado</span>
    {/if}
</header>

{#if page.props.flash.success}
    <div class="alert-success">{page.props.flash.success}</div>
{/if}

Como los datos compartidos se incluyen en todas las peticiones, se recomienda limitarlos al mínimo necesario. Si los pasas mediante una evaluación diferida con fn(), solo se evalúan cuando realmente se acceden.

Reactividad de Svelte 5 (runes)

Presentamos la sintaxis de runes de Svelte 5 que conviene conocer para desarrollar con Inertia × Svelte.

`$state` — Estado reactivo

<script lang="ts">
    let count = $state(0)
    let isOpen = $state(false)
    let items = $state<string[]>([])
</script>

<p>{count}</p>
<button onclick={() => count++}>+1</button>
<button onclick={() => isOpen = !isOpen}>Toggle</button>

Las variables declaradas con $state son reactivas automáticamente. Cuando cambia el valor, el DOM se actualiza automáticamente. Equivale a ref de Vue o useState de React, pero no hace falta acceder a la propiedad .value; basta con asignar para actualizar el estado.

`$derived` — Valores derivados

<script lang="ts">
    let posts = $state<{ title: string; published: boolean }[]>([])

    // Extrae solo las publicaciones con published a true
    let publishedPosts = $derived(posts.filter(post => post.published))

    // Cuando hay varias dependencias
    let summary = $derived.by(() => {
        const total = posts.length
        const published = publishedPosts.length
        return `${published} publicados de un total de ${total}`
    })
</script>

<p>{summary}</p>

$derived se recalcula automáticamente cuando cambian los valores de los que depende. Equivale a computed de Vue o useMemo de React.

`$effect` — Procesamiento de efectos secundarios

<script lang="ts">
    let query = $state('')

    // Se ejecuta cada vez que query cambia
    $effect(() => {
        console.log('la query de búsqueda ha cambiado:', query)

        // Se puede devolver una función de limpieza
        return () => {
            console.log('limpieza')
        }
    })
</script>

<input bind:value={query} placeholder="Buscar..." />

$effect se ejecuta cada vez que cambia un valor $state del que depende. Equivale a useEffect de React, pero no hay que declarar explícitamente el array de dependencias; las variables $state usadas se rastrean automáticamente.

Componentes shadcn-svelte

El starter kit incluye shadcn-svelte. shadcn-svelte es una biblioteca de componentes con la misma filosofía de diseño que shadcn/ui para React: copias el código en tu proyecto y lo puedes personalizar libremente.

Añadir componentes

npx shadcn-svelte@latest add button
npx shadcn-svelte@latest add input
npx shadcn-svelte@latest add card

Al ejecutar el comando, el código fuente del componente se coloca en resources/js/components/ui/.

Cómo usar

<script lang="ts">
    import { Button } from '@/components/ui/button'
    import { Input } from '@/components/ui/input'
    import * as Card from '@/components/ui/card'
    import { useForm } from '@inertiajs/svelte'

    const form = useForm({ email: '', password: '' })

    function submit(e: SubmitEvent) {
        e.preventDefault()
        form.post('/login')
    }
</script>

<Card.Root class="w-96">
    <Card.Header>
        <Card.Title>Iniciar sesión</Card.Title>
    </Card.Header>
    <Card.Content>
        <form onsubmit={submit} class="space-y-4">
            <Input
                type="email"
                bind:value={form.data.email}
                placeholder="Email"
            />
            {#if form.errors.email}
                <p class="text-sm text-red-500">{form.errors.email}</p>
            {/if}

            <Input
                type="password"
                bind:value={form.data.password}
                placeholder="Contraseña"
            />

            <Button type="submit" disabled={form.processing} class="w-full">
                {form.processing ? 'Iniciando sesión...' : 'Iniciar sesión'}
            </Button>
        </form>
    </Card.Content>
</Card.Root>

El starter kit incluye ya componentes de uso frecuente como Button, Input, Card, Dialog o Dropdown. Si quieres añadir más, puedes hacerlo cuando lo necesites con el comando npx shadcn-svelte@latest add.

Conclusión

Svelte saca su potencial al combinarse con Laravel, especialmente en la configuración de “monolito moderno” a través de Inertia. Por su diseño basado en compilador, el tamaño del bundle es pequeño, y gracias a la sintaxis de runes la reactividad es explícita y fácil de entender.

Elemento	Rol
Controlador de Laravel	Enrutamiento, obtención de datos y validación
`Inertia::render()`	Pasa datos del controlador al componente Svelte
Componente de página Svelte	Recibe props con `$props()` y renderiza la UI
`useForm`	Gestión del estado del formulario, envío y visualización de errores
Componente `Link`	Navegación entre páginas sin recarga completa
`usePage().props`	Acceso a los datos compartidos
shadcn-svelte	Biblioteca de componentes estándar

Con Inertia × Svelte obtienes una experiencia de desarrollo que combina la sencillez del backend Laravel con el estilo de código compacto de Svelte. Si creas el proyecto con el starter kit, puedes empezar a desarrollar de inmediato con las pantallas de autenticación incluidas.

Documentación oficial de Inertia.js

Para todas las funcionalidades de Inertia v3, consulta la documentación oficial.

​¿Qué es Svelte?

​Runes de Svelte 5

​Posición dentro de Laravel

​Historia

​Estilo dominante actual: Inertia × Svelte

​Configuración

​Vía starter kit (recomendado)

​Instalación manual

​Estructura de directorios

​Estructura básica de un archivo Svelte

​Sintaxis de plantilla

​Interpolación de variables y expresiones

​{#if} — Condicionales

​{#each} — Renderizado de listas

​bind: — Binding bidireccional

​Fundamentos del componente de página

​Controlador

​Componente de página Svelte

​Componente Link

​Componente Form

​Uso básico

​Patrón del starter kit

​Hook useForm

​Lado del controlador

​Componente de formulario Svelte

​Datos compartidos (Shared Data)

​Reactividad de Svelte 5 (runes)

​$state — Estado reactivo

​$derived — Valores derivados

​$effect — Procesamiento de efectos secundarios

​Componentes shadcn-svelte

​Añadir componentes

​Cómo usar

​Conclusión

Documentación oficial de Inertia.js

¿Qué es Svelte?

Runes de Svelte 5

Posición dentro de Laravel

Historia

Estilo dominante actual: Inertia × Svelte

Configuración

Vía starter kit (recomendado)

Instalación manual

Estructura de directorios

Estructura básica de un archivo Svelte

Sintaxis de plantilla

Interpolación de variables y expresiones

`{#if}` — Condicionales

`{#each}` — Renderizado de listas

`bind:` — Binding bidireccional

Fundamentos del componente de página

Controlador

Componente de página Svelte

Componente `Link`

Componente `Form`

Uso básico

Patrón del starter kit

Hook `useForm`

Lado del controlador

Componente de formulario Svelte

Datos compartidos (Shared Data)

Reactividad de Svelte 5 (runes)

`$state` — Estado reactivo

`$derived` — Valores derivados

`$effect` — Procesamiento de efectos secundarios

Componentes shadcn-svelte

Añadir componentes

Cómo usar

Conclusión