Livewire primeros pasos

Para probar crean un nuevo proyecto con Jestream que ya incluye livewire y taildwind css, si no sabes hacer esto en psots anteriores lo repito en varias ocaciones.

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.

Una vez instalado todo creamos nuestro primer componente livewire y más adelante lo llamaremos desde la vista dashboard.blade.php esta es la vista que nos crea automáticamente laravel en cuanto nos registramos con Jetstream . Este archivo se encuentra en

Resources/view/dashboard.blade.php

Para crear un componente escribimos el siguiente código en consola pero no antes de verificar de que estemos en el directorio de nuestro proyecto y que estemos bien registrados vía

 Vagrant ssh.

Php artisan make:livewire nombreDelComponente

Este componente se va a crear en la carpeta

 app/http/Livewire/ejemploComponente.php

El método más importante de nuestro componente es el método render

La vista que también generamos la encontraremos en

resources/view/layouts/livewire/ejemplo-vista.blade.php

Esta vista que también generamos a la hora de crear el componente tiene un comportamiento especial, para que esta vista se pueda renderizar es necesario que se cree un solo componente padre y que dentro de este se cree el resto de componentes por ejemplo

Esto no funcionaria

<div>
Imprime Texto de pruebas
</div>
<div>
Imprime  texto de pruebas
</div>

Para que se pueda renderizar es necesario hacerlo de esta manera:

<div>
<div>
Esto es un texto de pruebas
</div>
</div>

Básicamente el componente que creamos nos va a rende rizar la vista que también se creó en conjunto y que ambos tendrán el mismo nombre.  Ahora para llamar a este componente desde la vista  dashboard.blade.php es necesario utilizar la directiva de blade llamada

@livewire(‘nombre-componente’).

Si creamos un componente dentro de una carpeta simplemente escribimos el nombre de la carpeta seguido de un punto

@livewire(‘nombrecarpeta.nombre-componente’).

Es necesario que se escriba el nombre del componente en minúsculas completamente y se separe por guiones. De hecho cuando lo creamos en la misma consola nos muestra como quedo el componente y así es como deberíamos llamarlo por ejemplo por consola creamos un componente con el nombre  MuestraTabla y automáticamente laravel crea el componente con el mismo nombre MuestraTabla.php pero la vista que vamos a llamar seria muestra-tabla.blade.php

Si queremos  pasarle un título a nuestro componente lo pasaríamos dentro de un array a continuación del nombre del componente EJ:

@livewire(‘nombre-componente’,[‘title’ => ‘Titulo de prueba’]).

Ahora aquí estamos pasando mediante una variable con el nombre ‘title’ el titulo el cual tenemos que asignar dentro de la clase  que contiene el método render del propio componente

Componente ShowPost.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ShowPosts extends Component
{
    public $title;
    public function render()
    {
        return view('livewire.show-posts');
    }
}

 Ahora para poder acceder a esta propiedad que se encuentra dentro de la clase que contiene al método render puede ser accedida desde la vista usando {{ $title}} y nos muestra el contenido de la variable $title

Vista livewire show-posts.blade.php

<div>
    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}

    <div>
    Esto es un texto de prueba

    {{ $title }}
    </div>
</div>

Para los casos en que necesitamos que toda la pagina sea reactiva podemos utilizar a los componentes como si fueran controladores. y para eso importamos el componente showPost en el archivo de rutas web.php

Archivo web.php

<?php

use Illuminate\Support\Facades\Route;
//Para los  casos en que necesitamos que toda la pagina sea reactiva podemos utilizar a  los componentes
//como si fueran  controladores. y para eso importamos el componente showPost
use App\Http\Livewire\ShowPosts;

Route::get('/', function () {
    return view('welcome');
});

////////////////////////////////////*
original
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return view('dashboard');
})->name('dashboard'); */
///////////////////////////////////////////////////
//modificada
Route::middleware(['auth:sanctum', 'verified'])
->get('/dashboard',
//eliminamos la función anónima y le indicamos que esta ruta va a ser controlada por el componente showposts 
ShowPosts::class)->name('dashboard');

Es común trabajar las vistas de Laravel usando layouts y secciones de Blade, pero hay una forma diferente de trabajar usando componentes de Blade que nos ayudan a crear elementos que podemos reutilizar en las vistas, sin necesidad de repetir código a través de toda la aplicación. En el siguiente video aprenderás cómo trabajar con componentes de Blade para crear layouts dinámicos:

 Con este cambio la página se seguirá mostrando igual

Extender una plantilla.

Por default el componente que creamos extiende de la plantilla app.blade.php  que se encuentra dentro de resources

/views/layouts/app.blade.php

Podemos copiar esta plantilla y crear una copia de esta, como por ejempl base.blade.php

Archivo base.blade.php

En este archivo modificamos justo antes del SLOT y agregamos algo para probar

<h1>Plantilla Base</h1>
            <!-- Page Content -->
            <main>
                {{ $slot }}

            </main>

Ahora para extender esta plantilla desde el componente simplemente agregamos

->layaut(‘layouts.base’);

Archivo componente ShowPosts.php extendiendo una plantilla diferente. base.blade.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ShowPosts extends Component
{
    public $title;
// public $titulo;//esto es solo en el caso de que queramos cambiar el nombre  de la variable y asignarle
//el valor de otra
 /*
     public function mount($title)
    {
        $this->titulo=$title;
    }

*/
    public function render()
    {
        return view('livewire.show-posts')
        ->layout('layouts.base');
    }
}

Ahora con esto nos mostraría simplemente la plantilla extendida y  la vista.

Como acceder a los parámetros que recibimos vía URL desde el componente.

Para esto  debemos primero recibir vía URL un algún dato por ejemplo el nombre del blog

Creamos la ruta

Route::get('prueba/{name}',ShowPosts::class); //ruta controlada por el componente showposts

Después creamos un método mount() y declaramos la variable en el componente showPost.php;

Esto lo agregamos dentro de la clase ShowPosts

public $name;
public function mount($name)
{//a la variable name que recibimos via URL se la asignamos a la variable //$name
    $this->name= $name;
}

Por ultimo vamos a la vista e imprimimos el valor que nos llega via url

Archivo vista show-posts.blade.php

<div>
    {{-- Knowing others is intelligence; knowing yourself is true wisdom. --}}
 <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>
    <div>
    Valor que nos lleva via URL =

    {{ $name }}

  {{--   {{ $title }}  --}}{{--  {{ $titulo }} --}}
    </div>
</div>

Resultado:

Como obtener datos de la base de datos y mostrarla usando un componente livewire

Para probar primero creo una migración en conjunto con el modelo por ejemplo modelo Post con par de campos y le introducto varios datos o si quieren pueden crear un Factory para generar x cantidad de datos automáticamente.

Después vamos a nuestro  a nuestro modelo y en este permitimos el almacenamiento masivo, permitiendo así a los campos que deseemos acepten datos masivamente.

Pues agregamos estas líneas en el modelo Post dentro de la clase post:

 protected $fillable = ['title', 'content']; //habilitamos asignacion masiva

Una vez hecho esto vamos al componente de livewire e importamos el modelo post y dentro del render  hacemos un llamado a los datos.

Archivo componente livewire SowPost.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
//agregamos el modelo post para poder sacar los datos
use App\Models\Post;



class ShowPosts extends Component
{
   public function render()
    {

        $posts = post::all();// Pedimos la información de la BD
        return view('livewire.show-posts', compact('posts'));
    }

}

Por ultimo mostramos los datos en nuestra vista haciendo un llamado a {{ $posts}} y esto nos mostraría toda la información que solicitamos.

Contenido original de https://www.youtube.com/watch?v=VkW70aLNCbQ CodersFree Canal de youtube

Solo agregue comentarios e información adicional al código, si no tienes la posibilidad de ver o descargar los videos pues este es mi aporte.