Livewire 4 y Laravel 13: componentes reactivos sin escribir JavaScript

Livewire 4 llegó el 14 de enero de 2026 con single-file components, Route::livewire() e islands, y dos meses después Laravel 13 completó el stack: hoy puedes construir una interfaz reactiva con PHP y Blade sin escribir una sola línea de JavaScript. Este tutorial te muestra qué cambió respecto a la versión 3 y cómo montar un buscador con filtros en menos de una hora.

Qué es Livewire y por qué importa en 2026

Livewire es un framework full-stack para Laravel que permite crear componentes dinámicos con PHP puro y plantillas Blade. Cada interacción del usuario se envía al servidor, el componente se reevalúa y el DOM se actualiza de forma selectiva. El desarrollador escribe lógica en PHP y el framework se encarga del JavaScript necesario en segundo plano.

El enfoque server-driven frente a las SPAs

Las aplicaciones de una sola página (SPA) construidas con React o Vue separan el frontend del backend, duplican la lógica de validación y obligan a mantener una API. El enfoque server-driven de Livewire mantiene todo en el servidor: el estado, las reglas de negocio y el renderizado. Para equipos que ya dominan Laravel y Blade, esto elimina el salto de contexto y reduce el código a mantener, a costa de una latencia ligeramente mayor en cada interacción.

Qué aporta la versión 4 sobre la 3

La versión 4, presentada por Caleb Porzio como el mayor release hasta la fecha, cambia las convenciones: los single-file components pasan a ser el formato recomendado, las páginas completas se pueden declarar directamente en el archivo de rutas con Route::livewire() y el renderizado se controla con $this->view(). Además incorpora islands para aislar partes caras de la página, drag and drop integrado, optimistic UI y CSS y JavaScript con scope por defecto. El objetivo declarado es menos fricción y mejores defaults.

Instalación: Livewire 4 + Laravel 13 en minutos

Livewire 4 requiere PHP 8.3 o superior, el mismo requisito mínimo de Laravel 13, así que en un proyecto recién creado la instalación se reduce a dos comandos:

composer require livewire/livewire
php artisan make:livewire SearchBox

El segundo comando genera el componente de ejemplo con el que puedes probar que todo funciona. Livewire se integra con Blade sin configuración adicional: el JavaScript y los estilos se inyectan de forma automática en las vistas que usan componentes.

Single-file components: la nueva convención

Antes de la v4, cada componente se dividía en dos archivos: la clase PHP y la vista Blade. La versión 4 invierte esa lógica y propone un único archivo PHP que contiene la lógica y, al final, la plantilla.

Estructura de un componente en un solo archivo

<?php

namespace App\Livewire;

use Livewire\Component;

class SearchBox extends Component
{
    public string $query = '';

    public function render()
    {
        return $this->view('livewire.search-box');
    }
}

La plantilla vive en el mismo directorio, como resources/views/livewire/search-box.blade.php, y recibe los datos del componente. Esta estructura reduce la navegación entre archivos y hace que cada componente sea autocontenido, algo especialmente cómodo cuando el equipo trabaja con muchos componentes pequeños.

Cuándo usar el formato multi-file en su lugar

El formato clásico de clase más vista sigue disponible y tiene sentido en casos concretos: cuando la vista se reutiliza desde varios componentes, cuando el archivo de plantilla es muy largo o cuando prefieres mantener separadas la lógica y la presentación por política de equipo. La v4 no obliga a migrar todo de golpe; convive con el formato antiguo, aunque los proyectos nuevos deberían empezar con la convención single-file.

Páginas completas con Route::livewire()

Livewire 4 permite asignar un componente directamente a una ruta y convertirlo en una página completa, sin pasar por un controlador intermedio:

use App\Livewire\SearchBox;

Route::livewire('/buscar', SearchBox::class)
    ->layout('components.layouts.app')
    ->title('Buscador');

El componente recibe los parámetros de la ruta como argumentos de su método mount(), y puedes definir el layout, el título de la página y el middleware desde la propia definición de ruta. Para páginas que son un único componente, eliminas un controlador y una vista envoltorio.

Islands: renderizado aislado para partes caras

Un island es una sección de la página que se renderiza de forma independiente y no se reevalúa cuando cambian otros componentes. Es la respuesta de Livewire a un problema clásico: un panel lateral con datos pesados se recalculaba entero con cada interacción del componente principal. Al marcar esa parte como island, el framework la renderiza una vez y la deja intacta, lo que mantiene las interacciones rápidas aunque convivas con consultas costosas.

Optimistic UI y drag and drop integrados

La v4 incorpora utilidades para dos patrones de interfaz que antes requerían trabajo manual. La optimistic UI actualiza la pantalla de inmediato al optimismo del usuario y revierte el cambio si la petición al servidor falla. El drag and drop, por su parte, llega como una capa sobre los componentes de lista: reordenar elementos, moverlos entre listas y persistir el nuevo orden se resuelve sin librerías externas. Ambos son opcionales, pero cubren los casos que más JavaScript a medida generaban.

Ejemplo práctico: buscador con filtros y un Island

Para verlo todo junto, crea un componente que filtre una lista de artículos mientras escribes. La clave está en wire:model.live, que sincroniza la propiedad con el servidor en cada pulsación:

<input type="search" wire:model.live="query" placeholder="Buscar artículos...">

<ul>
    @foreach($articles as $article)
        <li>{{ $article->title }}</li>
    @endforeach
</ul>

En la clase, el método render() consulta los artículos filtrando por la propiedad query. Si además tienes un bloque caro, como estadísticas del blog, envuélvelo en un island para que no se recalcule con cada pulsación:

<livewire:island>
    <livewire:blog-stats />
</livewire:island>

Con esto obtienes una búsqueda reactiva con filtros y una zona aislada que solo se actualiza cuando sus propios datos cambian, todo en PHP y Blade.

Conclusión

Livewire 4 con Laravel 13 devuelve la interactividad a PHP: single-file components, rutas directas, islands y optimistic UI cubren la mayoría de necesidades de una interfaz reactiva sin salir del ecosistema Blade. Si vienes de Vue o React, empieza por un componente pequeño con wire:model.live y añade islands cuando el rendimiento lo pida. Sigue leyendo el blog para más tutoriales de Laravel y desarrollo web.