Instalación de Laravel Livewire

Livewire es un framework para Laravel que te permite crear interfaces dinámicas de forma simple, sin dejar de lado la comodidad de Blade. En esta serie de videotutoriales te enseñaré como utilizar Laravel Livewire para convertir tus módulos en interfaces dinámicas. Comencemos con la instalación de Livewire.

Mira el código en GitHub: actual, resultado, comparación.

Notas

Por Ambar Quintana.

Iniciaremos esta serie a partir de la lección 56 del curso Crea un Panel de Control con Laravel, donde actualizamos nuestro proyecto a la versión 7 del framework.

Instalar Livewire

Instalar Livewire es muy sencillo, para ello ejecuta en la consola:

composer require livewire/livewire

Crear nuevo Layout de Livewire

Para utilizar Livewire en nuestro proyecto, vamos a crear un nuevo layout llamado livewire-layout.blade.php dentro de resources/views/

En este nuevo layout, vamos a extender de layout.blade.php e incluiremos Livewire, de la siguiente manera:

@extends('layout')

@push('styles')
    @livewireStyles
@endpush

@push('scripts')
    @livewireScripts
@endpush

Para que esto funcione, debemos agregar la directiva @stack dentro de layout.blade.php, y en ella incluir las secciones styles y scripts:

<!doctype html>
<html lang="en">
<head>
    // código ...

    @stack('styles')
</head>

<body>
    //código ...

    @stack('scripts')
</body>
</html>

Puedes aprender más sobre Stacks o Pilas leyendo la documentación de Blade en español.

Extender Layout de Livewire

Vamos a resources/views/users/index.blade.php y en lugar de extender de nuestra plantilla layout, vamos a extender de livewire-layout:

@extends('livewire-layout')

De vuelta al navegador, si inspeccionamos nuestro proyecto, podremos ver una nueva etiqueta de Javascript donde se incluye Livewire, así como los estilos que éste requiere por defecto.

Crear componentes con Livewire

Podemos crear nuestro primer componente con Livewire ejecutando en la consola el comando make:livewire, seguido del nombre del componente:

php artisan make:livewire users-list

Una vez hecho esto, se van a generar dos nuevos archivos:

El primero se llamará users-list.blade.php y será la vista de nuestro componente, la cual estará en el directorio resources/views/livewire/.

Vamos a agregar un título dentro de esta vista:

<div>
    <h3>Users list here</h3>
</div>

El segundo archivo generado es UsersList.php y corresponderá a la clase donde escribiremos la lógica del componente, estará dentro del directorio app/Http/Livewire/.

Incluir componente de Livewire en vistas de Blade

En resources/views/users/index.blade.php vamos a incluir nuestro componente usando la directiva @livewire:

@extends('livewire-layout')

@section('title', 'Usuarios')

@section('content')
    //código ...

    @livewire('users-list')

    @includeWhen($view == 'index', 'users._filters')

    //código ...

Si regresamos al navegador y recargamos la página, podremos ver el título de nuestro componente.

Como paso adicional, vamos a mover la vista del componente al directorio resources/views/users/ y cambiaremos su nombre a _livewire-list.blade.php.

No olvides modificar el llamado a la vista del componente en el método render de app/Http/Livewire/UsersList.php.

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.