Features of a Livewire project: Livewire, volt, flux, Alpine...

Before we start developing our application in lightware I want to take a little break and tell you a little about what we have in a project in Livewire, in a few words we can say that lare is basically Laravel components enhanced, that is, with these components we can do multiple operations. What things could you ask yourself? Basically everything that we are going to cover in this course and a few more things that we are not going to cover as such, that is, that we could still explore is what laward allows, so I don't want to get too ahead of myself with that because it will be too technical and it is better to see it in practice, but that is basically it. Stay with that concept of Laravel components enhanced, that is, with many little things. So with the components we are going to see that we are going to be able to do view routing, that is, to be able to return a view instead of a controller returning it, we are going to be able to do it through a component through the use of its properties. We are also going to be able to make some links like what we do with Vue v-model, we are going to be able to do similar operations, query String, we also have the file upload part and a long etcetera.

Laravel volt

In recent Laravel Livewire projects, starting with Laravel version 12, when creating a project in Laravel Livewire it includes other technologies such as:

Volt:

https://livewire.laravel.com/docs/volt

Con la cual, podemos crear tanto la lógica como la vista (blade) en un solo archivo:

<?php

use function Livewire\Volt\{state};

state(['count' => 0]);

$increment = fn () => $this->count++;

?>

<div>
   <h1>{{ $count }}</h1>
   <button wire:click="increment">+</button>
</div>

Laravel Flux

We will also see that the auxiliary components we use now are not the same as before, now we use flux.

Flux, which is nothing more than a library of components for Laravel Livewire ready to use:

https://fluxui.dev/

<flux:input
   wire:model="email"
   :label="__('Email address')"
   type="email"
   required
   autocomplete="email"
   placeholder="email@example.com"
/>

What you can display to personalize:

$ php artisan flux:publish

We also see a more complex structure as in the composer.json we do not have the dependency on Livewire, but on the previous packages that import Livewire as a dependency.