You might be wondering.. what is Livewire? Don't we already have enough of a new tech stack?
While it's true that we already have enough of a new framework and tech stack, this new tool could be a perfect fit for you who don't have time to learn popular tech stacks for building modern web apps, but already know PHP and Laravel.
Laravel Livewire allows you to build dynamic web apps without the complexity of JavaScript, Vue.js, React, or Angular.
Again, All you need is PHP, Laravel, Livewire, and a bit of Alpine.js.
What is the quick example or use-case of using Livewire?
Imagine that you are building a community website where you have a comment and reply feature on a published thread.
Typically in modern web apps, once a user submits a comment, the page does not have to reload to make the comment appears below the thread.
Similar to what Facebook or Twitter does, when you replied to someone's posts, your page does not reload.
The website is becoming user-friendly, dynamic, and interactive. You can achieve this with Livewire just by using a Livewire component inside the Blade view.
No jQuery, no React, no Angular, no overthinking.
Yes, Livewire does the AJAX for you, so you don't have to
AJAX makes the live interactivity between users and the website possible. Behind the scene, Livewire already takes care of the AJAX-ing for you.
GIF image by Tony Lea.
What happens behind the scene?
Let's take a quick read from Livewire's official website:
Livewire renders the initial component output with the page (like a Blade includes). This way, it's SEO-friendly. When an interaction occurs, Livewire makes an AJAX request to the server with the updated data. The server re-renders the component and responds with the new HTML. Livewire then intelligently mutates DOM according to the things that changed.
Ooh It's magic, you know... can you believe it's magic, you know.... never believe it so it's magic
Alright, can you stop singing and show me the code example instead?
Would you pay me $5 via PayPal to show you some code examples? No, I'm not kidding but here are the codes..
Anyway, typically you need to work with two files. The first one is the Livewire component and the Livewire blade file.
Let's call our Livewire component a SearchCustomer, to make a Livewire Component, on your code terminal run the following command:
php artisan make:livewire SearchCustomer
This will create SearchCustomer.php under App\Http\Livewire directory,
and search-customer.blade.php under resources/views/livewire directory.
Your SearchCustomer Livewire component
<?php
use Livewire\Component;
class SearchCustomer extends Component
{
public $search = '';
public function render()
{
return view('livewire.search-customers', [
'users' => User::where('name', $this->search)->get(),
]);
}
}
Your SearchCustomer Livewire component contains one Livewire model, the $search property.
The $search property is used in the Livewire view: livewire.search-customers where it reactively tracks user inputs.
Whenever the value changes on this property, Livewire will re-render the component alongside the Eloquent query builder that is being passed into the view.
Your SearchCustomer Livewire view
<div>
<input wire:model="search" type="text" placeholder="Search users..."/>
<ul>
@foreach($users as $user)
<li>{{ $user->username }}</li>
@endforeach
</ul>
</div>
Your search-customer.blade.php Livewire view has a wire:model of "search", which is the property that you've set earlier inside the component class.
Every time now and then, whenever your user types the name of the customer, Livewire will handle the AJAX-ing for you to retrieve those lists of customers.
But there's one more thing... You have to call this Livewire in any Laravel blade file that you need.
Call your Livewire within your Laravel Blade file
<body>
...
@livewire('search-customer')
...
</body>
For example, you have a Blade file called customers.blade.php to let your user search for customers by name, this is the place where you should put your call your SearchCustomer Livewire.
<body>
...
<livewire:search-customer/>
...
</body>
Alternatively, you can call the Livewire component using the directive above.