The second best thing about Laravel Livewire, its REAL components

▶

I want to tell you about my second favorite thing about Laravel Livewire. Remember that in another video I already mentioned what I love most, which is simply the use of Livewire-specific attributes, like the famous wire:click. We use this attribute par excellence to trigger various actions.

I'll leave that video here in case you want to watch it, but I'll quickly summarize it for you: I love that button or that type of feature because with wire:click we can directly call a method defined on the server from the client. That is, from a button (which lives on the client) we can invoke something on the server without having to send forms or manual requests with Axios or Fetch.

With wire:click it's as simple as this:

wire:click="nombreDelMetodo"

No more creating routes, controllers, methods, or configuring HTTP requests... Everything is much more direct, clean, and modular. And that's precisely what I like most about Livewire.

What is my second favorite thing?

The second thing I like most are the actual components we can build. That's why I have this screen open: all of this is part of my full Laravel Livewire course/book, which you can get on my academy app or elsewhere.

You can filter by the Laravel section, click on Livewire, and you can purchase it there. It's also available on other platforms, like Udemy, or even in book format.

Livewire: Real Components, Not Just Views

Here we work with real components, not simple views. For example, we have a Blade file, where we reference the corresponding component with @livewire, which is simply a form.

This form has its validations, its logic, and everything else. For example, if I remove a field and submit, you'll see that the validations are executed. You can implement any type of logic in the component, and that's what makes it powerful.

But what I want to highlight isn't just that, but the fact that it's actually a component. If we couldn't do some initialization when defining it, this would be nothing more than a simple view. That's precisely what happens with Inertia.js, and that's why I don't like it so much.

Comparison with Inertia.js

Let's look at an example: the Person component. Here we have its associated class and its view, which we return in the render method. But the interesting thing is that we can execute PHP code when the component loads. Any initialization operation, whatever you want.

For example, in the Contact1 component (the first step), which is Person, we place a dd() or a dump to see that it actually executes. It's not called by a click, but by the component loading when a certain condition is met. In other words, as soon as it loads, server-side code is executed.

And that's what I love about Livewire: its ability to initialize on the server, when the component is mounted.

Controller:

class Person extends Component
{
    ***
    // ****
    function mount($parentId)
    {
        $this->parentId($parentId);
    }


    // **** #[On('parentId')] 
    function parentId($id)
    {
        $this->parentId = $id;

        $c = ContactPerson::where('contact_general_id', $this->parentId)->first();
        if ($c != null) {
            $this->name = $c->name;
            $this->surname = $c->surname;
            $this->other = $c->other;
            $this->choices = $c->choices;
        }
    }

View:

@elseif ($step == 2)
    @livewire('volt.contact.company', ['parentId' => $pk])
@elseif ($step == 2.5)
    @livewire('volt.contact.person', ['parentId' => $pk])

In Inertia.js, however, this doesn't happen. While you can return a component in Vue from Laravel, what you're really doing is returning a view. Nothing is executed on the server side as such. Everything happens on the client side.

What Does This Entail?

This means that in Inertia, if you want to perform any logic when loading the component, you have to do it from the client, for example, in the Vue lifecycle (mounted), and from there, trigger a request to the server.

Whereas in Livewire, all of this is already integrated. You can work directly from the backend, initializing, querying the database, validating, formatting... whatever you want.

For example, when we pass an identifier to a component, we can also pass all the data, such as the full contact. We do this so that the component is "assembled" correctly. In Inertia, what we do is pass the data as props from the controller, or even from the view, taking advantage of the fact that Vue accepts those props.

It's a slightly strange, but functional, hybrid. However, we don't have that direct server execution as we do in Livewire. In Inertia, we would have to mount the component and then make an additional request if we want initial logic.

Conclusion

So, you can more clearly see the difference between:

• A real component, as we see it in Livewire, with integrated client and server logic.
• A Vue component in Inertia, which is actually a view that requires manual logic to communicate with the server.