Laravel Livewire

The past week i have been trying out Laravel Livewire. In this post i will document my experiences with it, and share my thoughts about it.

What is Livewire?

Livewire is in some ways comparable to Vue or React as in: it updates the document live, not needing a refresh of the page.
However the way it does this is very different from most other frameworks

What sets Livewire apart?

Livewire works differently than Vue or React because it does not render the page itself. It lets the server do the calculating and rendering, and it just replaces the changed content. This way you do not really need to learn anything new, as long as you know how Laravel and Blade works.
So you can write all of your code in PHP.

How do i set this up?

Installing and creating your first Livewire component is really simple. It didn’t take me long to get up and running with it.

First you need to install the Livewire composer package

$ composer require livewire/livewire

Then in your head add the styles for livewire

    @livewireStyles
</head>

And add the Livewire scripts to the bottom of the page

    @livewireScripts
</body>

And that’s it, you’re ready for your first component

I wanted to create a list with out of stock products, where you can search through and have pagination without having to refresh. So i started off running the command to create my components

php artisan livewire:make OutOfStock

And replace my old template with my new livewire one:

- @include('partials.product-list', ['products' => $outOfStock])
+ @livewire('out-of-stock')

And add a search field

<input                 
  wire:model.debounce.250ms="nameSearch"
  type="text"
/>

However now it throws an error because it cannot find “nameSearch” in the PHP component, So let’s create it

In the Livewire component i’ll add

public $nameSearch = '';

And in the render function add the code to get and search in the out of stock products.

$outOfStockProducts = Product::with('supplier')->where('stock', '=', 0);
if (strlen($this->nameSearch) > 0) {
  $outOfStockProducts = $outOfStockProducts->where('name', 'like', '%' . $this->nameSearch . '%');
}

return view('livewire.out-of-stock', ['products' => $outOfStockProducts->get()]); 

That’s all you need, you now have a live search and can show the results however you’d like.

Conclusion

Livewire has been extremely simple to set up, getting a project set up with Livewire has taken around an hour. This with no prior knowledge of how Livewire works.

Because it is so straight forward to set up, and there is no new syntax you need to learn i think this is an amazing tool if you do not want to invest your time into learning vue, react or some other javascript framework.

This works great with Laravel because it is so lightweight and fast, however i don’t think this method would work for most other frameworks like Magento because it can be very slow to respond. Let alone having to do this many times in short succession.