
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.