Características de un proyecto Livewire 3 Laravel 12

En este capítulo, vamos a hablar sobre los aspectos más importantes que tenemos al momento de crear un proyecto en Laravel Livewire a partir de la versión 12 de Laravel, que como comentamos antes, a diferencia de versiones anteriores, ya no trae incluidas las funcionalidades que tenemos en versiones anteriores con Jetstream.

Lo primero que vemos, es un par de enlaces para registrarse y login, en este punto, si ya no los has hecho, crea un usuario; una vez registrado o iniciar la sesión, tendrás acceso a:

http://livewirestore.test/dashboard

Cuya vista corresponde a:

<x-layouts.app title="Dashboard">
   <div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
       <div class="grid auto-rows-min gap-4 md:grid-cols-3">
           <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
               <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
           </div>
           <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
               <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
           </div>
           <div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
               <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
           </div>
       </div>
       <div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
           <x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
       </div>
   </div>
</x-layouts.app>

Cómo puedes apreciar, x-layout-app, corresponde a un componente en Laravel base:

resources/views/components/layouts/app.blade.php

<x-layouts.app.sidebar :title="$title ?? null">
   <flux:main>
       {{ $slot }}
   </flux:main>
</x-layouts.app.sidebar>

Lo más extraño del código anterior, es el componente que inicia con flux, los cuales, son los componentes mencionados al inicio que provee el paquete de Livewire Flux, hay muchos a lo largo de toda la aplicación que sirven para distintos propósitos, pero, su sufijo, ya ejemplifica bastante bien qué es lo que hacen, por ejemplo:

<flux:navlist>
<flux:navlist.item>
<flux:heading>
<flux:subheading>
<flux:dropdown>
<flux:profile>
<flux:menu>
<flux:input>

Al final, todos estos no son más que componentes en Laravel con un montón de clases de Tailwind, así que, puedes inspeccionarlos desde el navegador; de igual forma, estos componentes los iremos empleando poco a poco a medida que avancemos.

resources/views/components/layouts/app/sidebar.blade.php

<flux:sidebar sticky stashable class="border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">

El resto de las acciones disponibles creadas por el instalador de Laravel tenemos acciones como cambiar la contraseña y otros datos de usuario, cerrar la cuenta, modo oscuro y poco más, esto lo tienes en el sidebar listado antes en la parte inferior:

http://livewirestore.test/settings/profile

Lamentablemente, ya no hay disponible opciones predefinidas antes con Jetstream como carga de avatar, sesión, roles/equipos.