The ONLY thing Laravel Livewire is missing to be perfect... A state manager

I wanted to share another opinion video here, related to one I recently published. As I always say, you can find it on my YouTube channel if you haven't seen it. And if you've seen it, you know I often share my impressions on technologies, especially the Laravel ecosystem, which is where I'm currently most focused.

Inertia and its approach

I've already mentioned in other videos some things that don't quite convince me about Inertia. I consider it a useful technology if you just want to work directly with Vue, which is already quite a lot. But beyond that, I don't think Inertia has anything special that would make you say, "This is perfect for this case," unless, again, you want to use Vue.

Livewire: more all-terrain?

On the other hand, Livewire seems more of an all-rounder to me compared to Inertia. It's not like you'd say "I just need to create this project with Alpine," but it does stand out for the flexibility it offers.

That's enough to summarize what I've discussed in other videos. However, I wanted to touch on one aspect that, for me, would make a key difference and make Livewire almost perfect.

Alpine vs Vue: What I'd Like to See

I mentioned earlier that I would love for Livewire to use Vue instead of Alpine, because Alpine sometimes seems a bit cumbersome to me. It works for simple things, but when you try to scale, it can become a bit annoying. Maybe it's just my perception because I've worked with Vue a lot more, but I still wanted to mention it.

This all came about from a comment I received recently. As always, when you talk about a technology, its proponents come up—which is fine, everyone has their own point of view. One of those comments caught my attention: the person said they didn't find Livewire complex to work with.

And they're right; it's all a matter of perception. I say it's complex because I've worked with many technologies, and I know how to implement the same logic in other tools where it's simpler. And the point I always make is: communication between components in Livewire can be a nightmare.

Communication between components: the real dilemma

When you have multiple nested components—not just parent and child, but also grandchildren or great-grandchildren—as we showed in the Livewire Basics course, it becomes very cumbersome. You have to pass messages through events, register listeners in the parent, and then trigger events from there. All of this can be very abstract and unclear to another developer coming into the project.

So I started thinking: how do other technologies do this?

Comparison with other technologies: Vue and Flutter

I also primarily work with Vue and Flutter, highly modular and component-based technologies (or widgets, in the case of Flutter).

In both, parent-child-grandchild communication isn't a problem, but there comes a point where the hierarchy grows and things get complicated. At that point, the recommended approach is to use a state manager.

In Flutter
Flutter has many options:

1. Provider
2. Bloc
3. Redux
4. Riverpod

I've worked primarily with Provider and some Redux. Bloc never convinced me, but it's a valid and widely used option.

In Vue
In Vue, we also have state managers:

1. Vuex
2. Pinia, que es más moderno y mucho más intuitivo.

Personally, I prefer Pinia for its simplicity.

What is a state manager?

A state manager is simply a layer you configure over your application to share and modify data between components.

For example, suppose you have the user's name in the main layout, and you want to modify it from a component three or four levels below. With a state manager:

• You place the name in the store.
• Any component can access that data (getter).
• And can also modify it (setter).

The change is automatically reflected throughout the component tree.

This can be done without having to propagate events from great-grandchild to grandchild, from grandchild to child, from child to parent, and so on, as is the case in Livewire.

Why does Livewire need this?

Livewire doesn't have a state manager. And that makes things very complicated when your project grows.

Imagine passing data from a grandchild component to the main layout, passing through the entire intermediate hierarchy... It's simply unsustainable.

That's why state managers are emerging in Vue, React, Angular, Flutter, and other frameworks, to avoid this mess. And that's why I think Livewire urgently needs it too.

How could it be implemented?

Ideally, Laravel Livewire could incorporate something like:

• A special component that functions as a store.
• Or an additional layer that serves to centralize the state.

It doesn't necessarily have to be a visual component, but rather something that can be configured and allows for clearer information sharing across all parts of the hierarchy.