Configurar un proyecto Laravel con Livewire permite construir interfaces dinámicas sin abandonar el ecosistema PHP. Aquí se recorre todo el proceso: desde la instalación del paquete hasta la creación de un componente completo con vista y lógica, incluyendo el diseño visual con clases de utilidad CSS.
¿Cómo se instala Livewire y se prepara la plantilla base?
El primer paso es incorporar el paquete a tu proyecto con el comando composer require livewire/livewire [0:16]. Este comando descarga el proveedor y el paquete necesario para que el framework funcione dentro de Laravel.
Una vez instalado, es necesario agregar dos directivas en la plantilla principal (app). Estas directivas son @livewireStyles y @livewireScripts [0:39]. La primera se coloca en la sección del <head> y la segunda justo antes del cierre del <body>. Sin estas directivas, los componentes no pueden comunicarse con el servidor ni aplicar sus estilos.
¿Qué ocurre al crear un componente con Artisan?
El comando php artisan make:livewire ShowThread [1:10] genera automáticamente dos archivos:
- Un archivo PHP con la lógica del componente, ubicado en
app/Http/Livewire.
- Un archivo Blade con la vista, ubicado en
resources/views/livewire.
Esta separación en dos partes es fundamental en Livewire: cada componente tiene su parte visual y su parte lógica [1:26]. El archivo PHP contiene un método render() que indica qué vista debe mostrarse.
¿Cómo se configura la ruta para apuntar al componente?
Antes de continuar, conviene limpiar el proyecto eliminando las vistas por defecto como welcome y dashboard [1:43]. Después, en el archivo de rutas, se reemplaza la vista anterior por una referencia directa al componente Livewire:
php
Route::get('/', \App\Http\Livewire\ShowThread::class)
->middleware('auth');
El middleware de autenticación [2:08] garantiza que solo los usuarios con sesión activa puedan acceder a la ruta. Esta protección funciona gracias al sistema de inicio de sesión que Laravel provee por defecto. Al visitar la ruta raíz, el navegador ya carga el componente Livewire en lugar del antiguo dashboard [2:22].
¿Cómo se estructura la vista del componente con clases CSS?
Dentro del archivo Blade del componente se construye un layout con dos columnas utilizando clases de utilidad. El contenedor principal aplica anchura máxima centrada, relleno lateral (px-4), y comportamiento responsive con variantes como sm y lg [2:55]. También se usa flex, gap-10 y py-12 para distribuir el espacio.
¿Qué elementos componen la barra lateral de categorías?
La primera columna tiene un ancho fijo de w-64 [3:14] y contiene:
- Botón "Preguntar": un enlace con estilo de gradiente (
bg-gradient-to-r) que va de blue-600 a blue-700 [3:54]. Al pasar el cursor (hover), los valores se invierten. El texto es blanco, negrita, pequeño, centrado y con esquinas redondeadas.
- Lista de categorías: cada elemento de la lista es un enlace flexible con un span circular que funciona como indicador de color [4:55]. El color de fondo se aplica de forma manual con el atributo
style y la propiedad background-color, ya que este valor será dinámico según la base de datos.
Las clases del elemento de lista incluyen p-2, rounded, flex, bg-slate-800, items-center, gap-2 y text-white/60 [4:24]. Al hacer hover, el texto pasa a text-white/100. La directiva capitalize asegura que la primera letra siempre sea mayúscula, algo útil cuando los datos provienen de la base de datos [4:48].
El span circular usa w y h fijos con rounded-full para crear una forma de bolita [5:01]. Se añade mb-2 a los elementos de la lista para separarlos visualmente [5:26].
La segunda columna ocupa w-full y es el espacio reservado para mostrar todas las preguntas del sistema.
Cada decisión de diseño responde a una necesidad funcional: la barra lateral permite filtrar por categorías y el área principal despliega el contenido. Si quieres profundizar en el comportamiento dinámico de estos elementos, comparte tus dudas y sigue practicando con la estructura propuesta.
