Creación de Componentes Dinámicos con Livewire en Laravel

Contenido del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

21
Consejos para Dominio de Laravel y Desarrollo Profesional
03:00 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:16

Creación de Componentes Dinámicos con Livewire en Laravel

Curso de Introducción a Laravel 8

Clase 11 de 21

Clase 11 / 21

Recursos

Construir interfaces dinámicas sin escribir montañas de código PHP es posible gracias a Livewire, la tecnología que Laravel recomienda para trabajar con componentes reutilizables. A continuación se explica cómo crear un componente desde cero, conectarlo con una consulta a la base de datos y configurar relaciones Eloquent para que todo funcione correctamente.

¿Qué es Livewire y por qué usarlo en Laravel?

Livewire permite crear interfaces dinámicas de forma simple y sencilla [0:06]. En el pasado, cuando se necesitaba mostrar diferentes elementos en una sola vista, se recurría a un controlador con múltiples métodos y consultas. Livewire cambia ese enfoque: cada pieza de la interfaz se convierte en un componente independiente que encapsula tanto la lógica PHP como el HTML correspondiente, lo que resulta en proyectos más modernos y profesionales.

¿Cómo se crea un componente con el comando artisan?

El proceso comienza en la terminal con el comando php artisan make:livewire seguido del nombre del componente [0:44]. Por ejemplo, para un listado de cursos:

bash php artisan make:livewire ListadoCursos

Se utiliza CamelCase porque el nombre funciona como una clase PHP [0:56].
Laravel genera automáticamente dos archivos: una clase PHP y una vista Blade.
En la carpeta de vistas, el nombre se transforma a minúsculas separadas por guiones: listado-cursos.blade.php [1:24].

Todo componente debe tener un único contenedor (un div que abre y cierra) para que el renderizado funcione correctamente [1:56].

¿Cómo se invoca el componente dentro de una vista?

Para mostrar el componente basta con usar una etiqueta HTML especial dentro de la vista principal [1:35]:

html <livewire:listado-cursos />

Al actualizar el navegador, el contenido del componente se renderiza directamente en la página index [1:44].

¿Dónde se programa la lógica del componente?

La clase PHP del componente se encuentra en app/Http/Livewire/ [2:06]. Su método render() es el encargado de devolver la vista asociada. Dentro de este método se pueden ejecutar consultas Eloquent y pasar variables a la vista, exactamente igual que en un controlador tradicional.

Por ejemplo, para obtener un listado de cursos con sus usuarios asociados y limitado a nueve registros [2:28]:

php public function render() { $cursos = Course::latest()->with('user')->take(9)->get();

return view('livewire.listado-cursos', compact('cursos'));

}

latest() ordena los resultados por los más recientes.
with('user') carga la relación con el usuario (eager loading) para evitar el problema de consultas N+1.
take(9) limita los resultados a nueve elementos.
get() es el método obligatorio que ejecuta la consulta [2:52].

¿Cómo configurar relaciones Eloquent entre modelos?

Al intentar cargar la relación user sin haberla definido, Laravel arroja un error indicando que la relación no existe [3:02]. Aunque la clave foránea se creó en la migración, es necesario declarar la relación en el modelo Eloquent.

Dentro del modelo Course se añade un método que define que un curso pertenece a un usuario (belongs to) [3:18]:

php public function user() { return $this->belongsTo(User::class); }

belongsTo indica una relación de pertenencia: cada curso tiene un dueño.
El nombre del método (user) coincide con el nombre de la relación que se invoca en with('user').

¿Cómo iterar los resultados en la vista del componente?

Una vez configurada la consulta y la relación, la vista del componente puede recorrer los resultados con @foreach [3:55]:

blade @foreach($cursos as $course) {{ $course->id }} @endforeach

Al actualizar el navegador aparecen todos los IDs de los cursos obtenidos, confirmando que el componente funciona correctamente [4:10].

La estructura queda clara: la vista index consume un componente Livewire, la lógica de la consulta vive en la clase del componente, y las relaciones se definen en los modelos Eloquent. Practica creando tu propio componente para familiarizarte con cada archivo involucrado y comparte en los comentarios cómo te fue con el ejercicio.

July Marcela Rivera

Hace 5 años

MI menu

class Menu extends Component
{
    public function render()
    {   //$categories = Category::all();
        
        $categories_id = Category::pluck('id'); 
        $sub_category = array();
        foreach($categories_id as $key => $category_id){
           $categories[$key] = Category::where('id',$category_id)->with('subcategories')->get();            
        }
        $categories =  json_encode($categories);
        $categories =  json_decode($categories);
   
        return view('livewire.menu')->with('categories',$categories);        
    }
   
}

La relaciòn

class Category extends Model
{
    use HasFactory;
   
    public function subcategories(){

        return $this->hasMany(Subcategory::class);
    }
    
}

Mi vista

<div class="hidden sm:block sm:ml-6">          
          <div class="flex space-x-4 group inline-block relative">
        @foreach ($categories as $data)
            <div class="relative">
              @foreach ($data as $category)              
                <span class="pr-4 font-semibold"><a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" role="menuitem" tabindex="-1" id="menu-item-0">{{$category->name}}</a></span>                                                                               
                @foreach ($category->subcategories as $subcategory)
                <div x-show="open" class="block px-4 py-2 text-sm bg-gray-100 rounded-md">  
                  <a href="#" class='block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white'>{{$subcategory->name}}</a>
                </div>    
                @endforeach                
              
              @endforeach
            </div>                
            @endforeach
          
          </div>
        </div>

Comentarios (25)25 comentarios

Alex Maldonado

Hace 6 años

Italo Morales Fantone

Profesor

Martin Campos

KEVIN BRAYAN LUNA FIGUEROA

Jimmy Buriticá Londoño

Miguel Bonifaz

Mauricio Galvez

Neyder Piedrahita Bellido

Hace 4 años

Guillermo Camacho

Sebastian Beltran Zapata

CARLOS ENRIQUE CALDERON AGUILAR

Juan Carlos Valencia López

Anthony Will Solsol Soplin

María Sierra

Carlos Eduardo Gomez García

Irving Caamal

Cristian Dario Bastos

Gustavo Eduardo Navarro Rodríguez

Edgar Ramón González Contreras

Christian Alvarenga

José Reinaldo Duque Serna

Eday Alix González Manjarrés

Hace 2 años

Esteban Cardona

Emmanuel Ovares

Gabriel Alvarez Contreras

Kenneth Angulo L

YOLIMA ALEJANDRA GUADIR PAGUAY

Julian David Alzate Cuervo

Jhon Marco Achata Limachi

Eduardo Bueno Lopez

Blanca Segura Garcia

Introducción

Curso Renovado de Laravel: Nuevas Herramientas y Conocimientos

Proyectos modernos con Laravel 8 y JetStream

Curso de Laravel 6: Soporte a Largo Plazo y Migración a Nuevas Versiones

Instalación y uso de JetStream en Laravel con Blade y TailwindCSS

Proyecto con Laravel 8

Creación de Proyecto Web con Laravel 8 y Tailwind CSS

Instalación y Configuración de Laravel 8 con Tailwind CSS

Creación de Datos Semilla en Laravel con Faker

Configuración de Rutas y Vistas en Laravel con JetStream

Creación de Plantillas Web con Blade y Tailwind CSS en Laravel

Configuración de Plantillas Blade en Visual Studio Code

Creación de Componentes Dinámicos con Livewire en Laravel

Creación de Campos Virtuales en Componentes con Tailwind CSS

Creación de Controladores y Rutas en Laravel 8

Rutas dinámicas y maquetación de cursos en PHP con Laravel

Configuración de Listado de Lecciones en Visual Studio

Configuración de Cursos Similares en Visual Studio

Creación y Uso de Componentes Blade en Laravel

Personalización de Elementos en JetStream con Visual Studio

Conclusión

Personalización de Vistas en Laravel con JetStream y Livewire

Desarrollo de Aplicaciones con Laravel 8 y JetStream

Bonus

Consejos para Dominio de Laravel y Desarrollo Profesional

Creación de Componentes Dinámicos con Livewire en Laravel

Progreso del curso

Introducción

Proyecto con Laravel 8

Conclusión

Bonus

Recursos

Recursos