Livewire para PHP: guía completa

1. ¿Qué es y para qué sirve?

Livewire es una biblioteca completa para Laravel que permite crear interfaces dinámicas y reactivas sin necesidad de escribir JavaScript. Funciona del lado del servidor, utilizando Alpine.js para actualizar el DOM, pero toda la lógica permanece en PHP. Es la herramienta ideal para desarrolladores que quieren crear aplicaciones web interactivas rápidamente, sin adentrarse en frameworks frontend complejos.

El objetivo principal de Livewire es simplificar el desarrollo de interfaces web modernas, manteniendo el enfoque familiar de Laravel. Escribes componentes en PHP y Livewire maneja automáticamente las peticiones AJAX, actualiza el DOM y gestiona el estado. Es especialmente útil para formularios, paneles de administración, chats y cualquier otro elemento interactivo.

La biblioteca resuelve el problema de la duplicación de código entre frontend y backend, permitiendo a los desarrolladores centrarse en la lógica de la aplicación, no en configurar WebSockets o bibliotecas JavaScript complejas. Livewire es perfecto para proyectos donde la velocidad de desarrollo y la facilidad de mantenimiento son clave.

2. Instalación

Para instalar Livewire usa Composer, el gestor de paquetes estándar de PHP. Ejecuta el siguiente comando en la raíz de tu proyecto Laravel:

composer require livewire/livewire

Tras la instalación, Livewire registrará automáticamente sus proveedores de servicios. Si usas Laravel 8 o superior, no necesitas configuración adicional. Para versiones anteriores, puede ser necesario añadir en config/app.php:

'providers' => [
    // ...
    Livewire\LivewireServiceProvider::class,
];

Asegúrate también de que en tu plantilla (normalmente layouts/app.blade.php) se incluyan los scripts y estilos de Livewire:

@livewireStyles
</head>
<body>
    @livewireScripts
</body>

3. Inicio rápido — ejemplo mínimo funcional

Vamos a crear un componente contador simple. Primero ejecuta el comando artisan:

php artisan make:livewire counter

Esto crea dos archivos: app/Http/Livewire/Counter.php y resources/views/livewire/counter.blade.php. Editamos la clase PHP:

<?php
namespace App\Http\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Y la plantilla:

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+1</button>
</div>

Ahora inserta el componente en cualquier vista Blade:

<livewire:counter />

¡Listo! Al hacer clic en el botón, el contador aumenta sin recargar la página.

4. Métodos/funciones/clases principales

4.1. render()

Firma: public function render(): View

Descripción: Método obligatorio que devuelve la plantilla Blade del componente. Se ejecuta en cada renderizado.

public function render()
{
    return view('livewire.my-component', ['data' => $this->getData()]);
}

4.2. mount()

Firma: public function mount(...$params): void

Descripción: Similar a un constructor, se ejecuta una sola vez durante el primer renderizado del componente. Se usa para inicializar propiedades.

public $userId;
public $user;

public function mount($userId)
{
    $this->userId = $userId;
    $this->user = User::find($userId);
}