Features of a Livewire 3 Laravel 12 project

▶

In this chapter, we'll discuss the most important aspects of creating a project in Laravel Livewire starting with Laravel version 12. As we mentioned before, unlike previous versions, Laravel no longer includes the features we had in previous versions with Jetstream.

The first thing we see is a pair of links to register and log in. At this point, if you haven't already done so, create a user. Once registered or logged in, you'll have access to:

http://livewirestore.test/dashboard

Whose view corresponds to:

<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>

As you can see, x-layout-app corresponds to a base Laravel component:

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

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

The strangest thing about the previous code is the component that starts with flux, which are the components mentioned at the beginning that the Livewire Flux package provides. There are many throughout the application that serve different purposes, but their suffix already exemplifies quite well what they do, for example:

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

Ultimately, these are all just Laravel components with a bunch of Tailwind classes, so you can inspect them from the browser. We'll be using these components gradually as we go along.

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">

The rest of the available actions created by the Laravel installer include actions such as changing the password and other user data, closing the account, dark mode, and little else. These are listed in the sidebar below:

http://livewirestore.test/settings/profile

Unfortunately, predefined options previously available with Jetstream, such as avatar upload, session, and roles/teams, are no longer available.