En este artículo veremos los primeros pasos con Livewire. Aprenderás a instalar Livewire desde cero en un proyecto Laravel, crear componentes Livewire con data binding y a usarlos en una vista del sitio web.
En este artículo vamos a ver los primeros pasos para integrar Livewire en una aplicación Laravel y crear nuestro primer componente. La parte de la instalación puede ser algo puramente automático si usamos Jetstream, pero si no es así, tendremos que realizar algunos pasos extra.
Cómo se integra Livewire con Laravel
Livewire es un complemento opcional en el framework. Podemos usarlo o no, según nuestras preferencias. En Laravel 7 o anteriores para instalarlo tenías que hacerlo de manera manual. Sin embargo, a partir de Laravel 8 Livewire se integró en uno de los presets frontend del framework, que vienen con Jetstream.
Para quien no lo sepa, Jetstream es como una base de código adicional al propio Laravel, que puedes usar para proporcionarte toda una funcionalidad extra para el tratamiento de usuarios en el framework. Dentro de Jetstream a su vez hay como dos vertientes:
- Livewire con templates en Blade
- Inertia con el framework frontend Vue
Si escogemos instalar Jetstream con el preset de Livewire, entonces ya tendremos instalado este paquete de manera predeterminada. Si no, entonces tenemos que instalarlo a mano.
Jetstream es un tema en el que no queremos entrar todavía, o al menos no en este manual, para no agregar más complejidad y centrarnos simplemente en aprender a usar Livewire.
Instalar Livewire
Como decimos, estos son los pasos que tienes que hacer en versiones de Laravel anteriores a la 8, o si no usas Jetstream.
Instalamos Livewire usando Composer con este comando:
composer require livewire/livewire
Se instalará la versión actual de Livewire. En el momento de escribir este artículo es Livewire 2.x.
Colocar los scripts y el CSS de Livewire
En este paso vamos a crear un layout para nuestro sitio web. Los conocimientos para realizar esta parte son los que ya tienes de Laravel en general. No cambia mucho, simplemente que en este layout tendremos que introducir un par de directivas de Livewire.
En nuestro ejemplo vamos a colocar este layout en el archivo: resources/views/layouts/app.blade.php
Como hemos dicho, dado que queremos renderizar componentes de Livewire, necesitamos dos directivas, que nos permiten colocar el CSS y los scripts Javascript necesarios para que Livewire funcione convenientemente.
- @livewireStyles: esta directiva sirve para que se escriban los estilos CSS necesarios para que Livewire funcione. Debemos colocarla en el HEAD.
- @livewireScripts: esta directiva la usamos para mostrar los scripts de Javascript necesarios para Livewire. La colocaremos antes del cierre del BODY.
El layout podría quedar más o menos así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
@livewireStyles
</head>
<body>
<div class="container">
@yield('content')
</div>
@livewireScripts
</body>
</html>
Este layout es un demo extremadamente simple, solamente para destacar las partes que nos interesan que son las directivas @livewireStyles y @livewireScripts, junto con los lugares donde deberíamos colocarlas.
Crear un componente Livewire
Para crear un componente de Livewire podemos apoyarnos en el ayudante Artisan. El comando para generar el scaffolding sería el siguiente:
php artisan make:livewire FirstComponent
En este caso "FirstComponent" es el nombre del componente que vamos a crear, que colocamos en "camel case", como cualquier clase del framework.
Este comando de Artisan genera los dos archivos que en principio serían necesarios para mostrar el componente.
Archivo FirstComponent.php
Este archivo es el controlador del componente, que se generó en la carpeta app/http/livewire, por lo tanto, su ruta sería esta:
app/http/livewire/FirstComponent.php
El controlador nos servirá para escribir la lógica, es decir, declarar las propiedades del componente y escribir el código PHP necesario para sus funcionalidades.
De momento vamos a declarar una propiedad pública en el componente, para poder acceder a ella desde la vista.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class FirstComponent extends Component
{
public $site = 'DesarrolloWeb.com';
public function render()
{
return view('livewire.first-component');
}
}
Dentro del componente hemos definido una propiedad llamada $site, a la que le hemos asignado el valor "desarrolloweb.com". Esa propiedad no es necesario enviarla a la vista del componente, ya que la hemos definido con la visibilidad "public".
Luego vemos el método render, que es el encargado de invocar la vista que se encargará de renderizar el componente con los datos.
Vista first-component.blade.php
Este archivo nos sirve para definir la parte visual del componente. Su ruta completa sería algo como esto:
resources/views/livewire/first-component.blade.php
En esta vista podemos escribir el HTML que queramos y realizar el interpolado de datos que sea necesario. Desde la vista podemos acceder a los valores almacenados en las propiedades declaradas como públicas en el controlador, así como a cualquier dato extra que le pasemos a la vista por medio del método render (aunque en este caso no se le pasó ningún dato extra).
<div>
<p>
{{ $site }}
</p>
<input type="text" wire:model="site">
</div>
En el código anterior {{ $site }} nos permite interpolar el valor de la propiedad pública $site dentro del componente.
Además vemos otra cosa muy curiosa que es un campo input, que tiene un atributo novedoso (wire:model), que hace un enlace de datos o binding entre la propiedad $site y lo que haya escrito en el campo de texto.
Usar el componente
Una vez realizado el componente, podemos usarlo todas las veces que haga falta a lo largo del sitio web, en todas las vistas que necesitemos su funcionalidad.
Para usar el componente colocaremos unos tag especiales dentro de las vistas Blade de Laravel.
Lógicamente, en la vista que vayamos a usar el componente tienen que estar incluidas las directivas de Livewire que habíamos creado en el layout principal del sitio. Por ejemplo, esta vista extiende el layout principal del sitio (donde están implementadas las mencionadas directivas) y hace uso del componente que acabamos de crear.
Este sería el código de nuestra vista, que hemos colocado en el archivo resources/views/sections/primeros-pasos.blade.php.
@extends('layouts.app')
@section('title', 'Probando Livewire!!')
@section('content')
<h1>Probando Livewire</h1>
<p>Lorem ipsum...</p>
<livewire:first-component />
@endsection
El nombre del componente lo colocamos en "kebab case", como lo puedes ver en el código anterior. Aunque hay un detalle importante sobre la notación de uso del componente utilizada:
<livewire:first-component />
Esa notación está solamente disponible en Laravel 7 en adelante, dado que hace uso de los nuevos componentes frontend basados en clases, que introdujo Laraven a partir de esta versión.
Existe una notación alternativa que funciona en cualquiera de las versiones de Laravel que estés usando:
@livewire('first-component')
Puedes elegir una u otra notación de uso del componente. Incluso puedes mezclarlas en la misma vista.
Crear una ruta para mostrar esta vista
Hasta aquí hemos visto todo lo que respecta a Livewire. Solo nos faltaría poder poner en marcha este ejemplo y para ello necesitamos crear una vista en nuestra aplicación.
En el archivo routes/web.php colocaremos entonces una ruta que llame a la vista de la página primeros-pasos.
Route::view('/primeros-pasos', 'sections.primeros-pasos');
Ya nada más nos queda abrir el navegador y acceder a esta ruta para ver el ejemplo en marcha.
Conclusión
Esperamos que hayas podido poner en marcha el ejemplo sin problemas, ya que realmente era algo bien simple. Quizás te haya sorprendido el dinamismo conseguido en este ejercicio con el campo de texto. Al cambiar el contenido del input habrás podido comprobar que está enlazado con un binding dinámico con la variable $site interpolada en la vista del componente.
El ejemplo que hemos realizado es solo el inicio de todas las cosas que puedes hacer con Livewire y cómo te dispensa de usar Javascript para conseguir comportamientos dinámicos. Más adelante veremos lógicamente cosas más complejas que seguramente te sorprenderán más.
Si quieres obtener el código completo de este ejemplo, lo encuentras en GitHub: https://github.com/deswebcom/livewire-laravel
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...