Creación de Componentes Livewire para Listado de Preguntas

Clase 5 de 26 • Curso de Interfaces Dinámicas con Laravel Livewire

Resumen

¿Cómo iniciar con Livewire en un proyecto Laravel?

¡Explorar la magia de Livewire en Laravel es fascinante! Empezamos instalando Livewire a través de Composer con el comando:

composer require livewire/livewire

La instalación activa la necesidad de integrar ciertas directivas en nuestra plantilla para que todo funcione correctamente. Añadimos @livewireStyles y @livewireScripts a nuestra plantilla base de Laravel, generalmente en el archivo app.blade.php. Este paso garantiza que el CSS y JS necesarios se carguen correctamente.

¿Cómo crear un componente Livewire?

Crear un componente en Livewire es un proceso sencillo que involucra dos archivos: lógica y vista. Puedes iniciar creando un componente con el siguiente comando de Artisan:

php artisan make:livewire ShowThRiff

Con esto, Livewire genera una carpeta nueva con dos archivos: uno para la lógica PHP y otro para la vista, ambos con el mismo nombre del componente.

¿Cómo integrar un componente Livewire a las rutas?

Para vincular nuestro componente con las rutas de Laravel, ajustamos las rutas predeterminadas para apuntar a nuestro nuevo componente:

Route::get('/', \App\Http\Livewire\ShowThRiff::class)->middleware(['auth']);

Esto significa que solo los usuarios autenticados podrán acceder al componente. Eliminamos vistas predeterminadas como "Welcome" y configuramos la nueva estructura de la aplicación.

¿Cómo diseñar el componente con Tailwind CSS?

El diseño por defecto puede parecer simple, pero con Tailwind CSS mejoramos la apariencia fácilmente. Implementamos clases CSS para crear una disposición atractiva:

Contenedores responsivos: Usamos clases como max-w-7xl mx-auto px-4 sm:px-6 lg:px-8.
Disposición de columnas: Creamos un layout de dos columnas, una fija (W64) y otra flexible (WFull).
Enlaces estilizados: Diseñamos los enlaces de la lista con block w-full py-4 mb-10 bg-gradient-to-r from-blue-600 to-blue-700 hover:bg-blue-700.

Cada componente visual tiene su lógica bien definida, permitiendo un diseño limpio y responsivo adaptable a diferentes pantallas.

¿Qué clases CSS definir para listas y elementos?

La lista de elementos se configura para flexibilidad y estilo:

Clases para listas: flex items-center gap-2 p-2 bg-slate-800.
Estilo para textos: text-xs text-white font-semibold.
Estilo para spans: Añadimos colores personalizados en los spans con un bg-color correspondiente a su contexto.

Con estos ajustes, obtienes una interfaz visualmente agradable y fácil de modificar según las necesidades del usuario.

¿Cómo realzar el diseño dinámico?

Diseñar para cambios futuros es una práctica crucial. Por ejemplo, cuando utilizas letras dinámicas, decides si las quieres en mayúscula o no. Esto se controla con Tailwind como capitalize, para futuros dinámicos.

Además, entidades como los colores de fondos se establecen dinámicamente a través de la base de datos, proporcionando un diseño versátil y adaptable a datos dinámicos.

Siguiendo estos pasos, puedes crear y configurar eficientemente un sistema basado en Livewire en tu aplicación Laravel. La personalización es clave, y con las opciones vastas que ofrece Livewire, ¡el límite es tu imaginación! Continúa aprendiendo y transformando tus aplicaciones.

Augusto Alegre

student•

Buenas, hace unas semanas livewire tuvo algunos cambios, los cambios que interesan para está clase son: Antes -> App/Http/livewire/ShowThreads ahora->App/livewire/ShowThreads Archivo config de livewire deben modificar y agregar lo siguiente : 'layout' => 'layouts.app', háganlo únicamente si tienen el siguiente error Livewire page component layout view not found: [components.layouts.app]

Espero les sirva

William Villegas

student•

no encuentro el archivo config de livewire bro 😭😭

Clara Savelli Betancourt

student•

Hola william, Si no puedes encontrar el archivo en la carpeta config, ejecuta el comando php artisan livewire:publish --config para publicar el archivo de configuración.

Leonardo Pablo Mannanice

company_admin•

Hola a todos! Les cuento lo que me paso por las dudas que pueda ayudar a alguien! Cuando cree el componente livewire

php artisan make:livewire show-threads

El componente Livewire no se creo dentro de Http como indica la documentación, sino dentro de App.

Por lo tanto me tiraba este error

pp\livewire\ShowThreads` was not found.
Controller class App\livewire\ShowThreads for one of your routes was not found. Are you sure this controller exists and is imported correctly?

Para solucionarlo el problema cambie la ruta del componente en la ruta web.

Luego me tiro otro error

Livewire page component layout view not found: [components.layouts.app]

Para solucionarlo tuve mover una carpeta en las vistas. En Views-components meter la carpeta layouts

Escucho opiniones. Saludos. PD: Un grande el profe.

Leonardo Pablo Mannanice

company_admin•

Otra cosa!

Es necesario en app.blade corregir el include de navigation.

Si alguien tiene idea porque paso esto. Genial! Saludos

Cristian Echeverría Cárdenas

student•

Hola, me ocurrio lo mismo, creo que el problema se prodce por la versión de livewire que ahora es la 3 Saludos

Alvaro Huaysara Jauregui

student•

En Laravel 11 tuve que ejecutar

php artisan livewire:publish --config
```php artisan livewire:publish --config

Entrar en el archivo config/livewire.php

y cambiar

'components.layouts.app'

por

'layouts.app'

George M

student•

Hola, Si desde la vista del componente de livewire no hay referencia al layout, porque aparece el navigation al renderizar el componente? gracias saludos

Carlos Alberto Ferrer Boscán

student•

Saludos Fender, cuando configuras todo asi, el toma por defecto el layout llamado app.blade.php, si renombras ese layaout te vas a dar cuenta que el sitio te va a generar un error

Jhon Marco Achata Limachi

student•

Los componentes de livewire full-page como el profe Italo declaro en la ruta tienen por defecto como layout el archivo layouts/app.blade.php, si quisieras modificar el layout por defecto, debes declararlo en el archivo del componente App/Http/Livewire/ShowThreads en este caso, en la función de la render debes agregar lo siguiente:

// App/Http/Livewire/ShowThreads.php
public function render()
{
	return view('livewire.show-threads')
		->layout('layouts.mi-layout');
}

Más información: https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout

Sammy Joseph Taboada Paz

student•

Me sucedió que, después de agregar los estilos de Livewire @livewireStyles en la plantilla app.blade.php, las nuevas clases de Tailwind que iba agregando en mi vista show-threads como bg-blue-600 y otras, no funcionaban. Haciendo pruebas, tuve que quitar/comentar @livewireStyles de la plantilla app.blade.php y los estilos de Tailwind volvieron a responder. Nuevamente agregué/descomenté @livewireStyles y ya todo funciona bien.

Por lo visto se generó un conflicto temporal de clases entre Livewire y Tailwind.

Clara Savelli Betancourt

student•

hubieras ejecutado npm run build

Clara Savelli Betancourt

student•

o npm run dev

Blanca Segura Garcia

student•

SUGERENCIA: Se debe de poner en el inicio de la clase, los posibles errores por cambio de versión de Livewire. Se aprende a encontrar la solución, pero se pierde tiempo, paciencia y hasta ganas de continuar ...

Alvaro Huaysara Jauregui

student•

En Laravel 11 tuve que ejecutar

php artisan livewire:publish --config

Entrar en el archivo config/livewire.php

y cambiar

'components.layouts.app'

por

'layouts.app'

Juan David Rueda Quiroga

student•

Como puedo trabajar con fluxUI que es el StarterKit de Laravel 12 con Livewire

Christian Pastor Hernandez Hernandez

student•

En laravel 12 y livewire 3

Alvaro Huaysara Jauregui

student•

En Laravel 11 tuve que ejecutar

php artisan livewire:publish --config
```Entrar en el archivo config/livewire.php

y cambiar

'components.layouts.app'

por

'layouts.app'

Alvaro Huaysara Jauregui

student•

En Laravel 11 tuve que ejecutar

php artisan livewire:publish --config
```Entrar en el archivo config/livewire.php

y cambiar

`'components.layouts.app'`

por
`'layouts.app'`

Alvaro Huaysara Jauregui

student•

En Laravel 11 tuve que ejecutar

php artisan livewire:publish --config

Entrar en el archivo config/livewire.php

y cambiar

'layout' => 'components.layouts.app',
```por

```js
'layout' => 'layouts.app',

Alvaro Huaysara Jauregui

student•

En Laravel 11 tuve que ejecutar

php artisan livewire:publish --config

Entrar en el archivo config/livewire.php

y cambiar

'layout' => 'components.layouts.app',

por

'layout' => 'layouts.app',

Iván Andrés Pineda Salazar

student•

Hola a todos, si están utilizando la versión 3.0 de Livewire, la forma de incluir la ruta en el archivo web.php ha cambiado.

A mi me salía este error:

Para solucionar esto, debes dejar la ruta web de la siguiente manera, utilizando nuestro componente ShowThreads. El archivo web.php quedaría así:

<?php use Illuminate\Support\Facades\Route;use App\Livewire\ShowThreads; //Incluir nuestro componenente // Route::view('/', \App\Livewire\ShowThreads::class)->middleware('auth')->name('dashboard');//Ruta version anteriorRoute::get('/', ShowThreads::class) ->middleware(['auth']) ->name('dashboard');//Nueva ruta Route::view('profile', 'profile')->middleware(['auth'])->name('profile'); require __DIR__.'/auth.php';

Fabian Espitia

student•

Estp es porque la ruta no concuerda con lo que dice el profe , para los que estamos utilizando laravel 11 , en el archivo de routes > web. php hay que dejarlo asi :

PD: dure mucho buscando esto ..

Hector Guerrero

student•

Buenas espero serles de ayuda en el caso de que estén experimentando problemas a la hora de declarar las rutas con livewire de la manera que explica el profe Italo: Según la documentación de Livewire la versión 3.0 la manera de declarar las rutas es de esta manera: use App\Livewire\ShowThreads; Route::get('/', ShowThreads::class) ->middleware(['auth']) ->name('dashboard'); Luego debemos correr el siguiente comando: php artisan livewire:layout Y listo ya todo funciona correctamente.
Les dejo la doc por si quieren echar un vistaso: https://livewire.laravel.com/docs/quickstart

Iván Andrés Pineda Salazar

student•

Ahí vamos

Creación de Componentes Livewire para Listado de Preguntas

Introducción

Desarrollo de un Foro Interactivo con Laravel y Livewire

Integración de Laravel, Livewire y Tailwind CSS para diseño web profesional

Configuración base

Configuración Inicial de Proyectos Laravel con Visual Studio Code

Configuración y Personalización de Plantillas con Tailwind CSS