Inicio Rápido

Para comenzar tu viaje por Livewire, crearemos un simple componente «contador» y lo renderizaremos en el navegador. Este ejemplo es una gran manera de experimentar Livewire por primera vez, ya que demuestra la vivacidad de Livewire de la manera más simple posible.

Requisitos previos

Antes de empezar, asegúrese de que tiene instalado lo siguiente:

• Laravel versión 10 o posterior
• PHP versión 8.1 o posterior

Instalar Livewire

Desde el directorio raíz de tu aplicación Laravel, ejecuta el siguiente comando de Composer:

composer require livewire/livewire

Asegúrese de que Alpine no está ya instalado

Si la aplicación que está utilizando ya tiene AlpineJS instalado, necesitará eliminarlo para que Livewire funcione correctamente; de lo contrario, Alpine se cargará dos veces y Livewire no funcionará. Por ejemplo, si ha instalado el kit de inicio de Laravel Breeze «Blade with Alpine», tendrá que eliminar Alpine de resources/js/app.js.

Crear un componente Livewire

Livewire proporciona un conveniente comando Artisan para generar nuevos componentes rápidamente. Ejecute el siguiente comando para crear un nuevo componente **Counter**:

php artisan make:livewire counter

Este comando generará dos nuevos archivos en su proyecto:

• app/Livewire/Counter.php
• resources/views/livewire/counter.blade.php

Escribir la clase

Abra app/Livewire/Counter.php y sustituya su contenido por el siguiente:

<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 1;

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

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

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

He aquí una breve explicación del código anterior:

• public $count = 1; Declara una propiedad pública llamada $count con un valor inicial de 1.
• public function increment() Declara un método público llamado increment() que incrementa la propiedad $count cada vez que es llamado. Los métodos públicos como este pueden ser activados desde el navegador de varias maneras, incluyendo cuando un usuario hace clic en un botón.
• public function render() Declara un método render() que devuelve una vista Blade. Esta vista Blade contendrá la plantilla HTML de nuestro componente.

Escribir la vista

Abra el archivo resources/views/livewire/counter.blade.php y sustituya su contenido por el siguiente:

<div>
    <h1>{{ $count }}</h1>

    <button wire:click="increment">+</button>

    <button wire:click="decrement">-</button>
</div>

Este código mostrará el valor de la propiedad $count y dos botones que incrementan y decrementan la propiedad $count, respectivamente.

Los componentes Livewire DEBEN tener un único elemento raíz

Para que Livewire funcione, los componentes deben tener un solo elemento como raíz. Si se detectan múltiples elementos raíz, se lanzará una excepción. Se recomienda utilizar un elemento <div>, como en el ejemplo. Los comentarios HTML cuentan como elementos separados y deben colocarse dentro del elemento raíz. Al renderizar componentes de página completa, los slots nombrados para el archivo de diseño pueden colocarse fuera del elemento raíz. Estos se eliminan antes de que el componente sea renderizado.

Registrar una ruta para el componente

Abre el archivo routes/web.php en tu aplicación Laravel y añade el siguiente código:

use App\Livewire\Counter;

Route::get('/counter', Counter::class);

Ahora, nuestro componente de contador está asignado a la ruta /counter, de modo que cuando un usuario visite el endpoint /counter en tu aplicación, este componente será renderizado por el navegador.

Crear una plantilla de diseño

Antes de que puedas visitar /counter en el navegador, necesitamos una plantilla HTML en la que nuestro componente se renderice. Por defecto, Livewire buscará automáticamente un archivo de diseño llamado: resources/views/components/layouts/app.blade.php

Puedes crear este archivo si aún no existe ejecutando el siguiente comando:

php artisan livewire:layout

Este comando generará un archivo llamado resources/views/components/layouts/app.blade.php con el siguiente contenido:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ $title ?? 'Título de la página' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

El componente de contador se renderizará en lugar de la variable $slot en la plantilla anterior.

Te habrás dado cuenta de que Livewire no proporciona ningún activo JavaScript o CSS. Esto se debe a que Livewire 3 y superiores inyectan automáticamente cualquier activo frontend que necesite.

Pruébalo

Con nuestra clase de componente y plantillas en su lugar, ¡nuestro componente está listo para probar!

Visite /counter en su navegador, y debería ver un número mostrado en la pantalla con dos botones para incrementar y decrementar el número.

Después de hacer clic en uno de los botones, se dará cuenta de que el recuento se actualiza en tiempo real, sin recargar la página. Esta es la magia de Livewire: aplicaciones frontales dinámicas escritas completamente en PHP.

Apenas hemos arañado la superficie de lo que Livewire es capaz. Sigue leyendo la documentación para ver todo lo que Livewire tiene que ofrecer.