The Big Parts
To get a grasp of how Laravel Livewire works there a few important parts you need to know:
- including the Laravel Livewire scripts and styles
- creating the Livewire component and blade template
- including the Livewire component somewhere in another blade view
What is a Livewire component?
In order to understand Livewire components you have to understand what components are. If you are already used to Blade components, you’re half-way there.
Basically components are re-usable pieces of code and typically they have UI. For instance of you look at Bootstrap’s documentation you’ll see that they have a “modal” component. This modal component can be re-used.
Now with Livewire components you’re not forced to re-use the component, but you can definitely build it in such a way that it’s re-usable.
A Livewire is composed of a Livewire component class and livewire blade view. These two are married to each other so it’s important to understand that relationship.
The component handles the server side interactions while passes data to the view and even emits events to it. The view interacts with the component by means of manipulating the bound properties (called models), calling methods, and optionally emitting events that can be “listened to”.
There are no controllers. I repeat. There are no controllers. This is what makes Livewire components unique. You don’t think about controllers and routes bound to controller methods. You think about the view and how it interacts with its specific Livewire component. That is it.
Real World Example using Laravel Livewire
So I made a simple example to illustrate the most basic concept of Livewire: binding properties to the component class through the use of wire:model like so:
<input class="form-control" wire:model="search" type="text" placeholder="Search iTunes"/>
Take note of the value set for wire:model. It’s search. This is the same value you’ll set on the class component as a public property. It’s ultimately what ties the component class and blade view together.
So your component class will look like this:
class SearchItunes extends Component
{
public $search = '';
...
Notice the public visibility modifier for the class property. Any property that is marked as public in the class is automatically available in the view. Should I change the $search property to protected or private, that would break the relationship between the wire:model in the view and the component. So keep that in mind.
The next important portion is the render method. This gets called when the component updates, similar to how the render function of a React component gets called when the state changes.
public function render()
{
$results = $this->searchItunes();
return view('livewire.search-itunes', ['results' => $results]);
}
protected function searchItunes()
{
if ($this->search) {
return Http::get('https://itunes.apple.com/search', [
'term' => $this->search,
'limit' => '10'
])->object()->results;
} else {
return [];
}
}
Since the render method gets called every time the component updates, and every input that uses wire:model will trigger a component update, you can use that to your advantage do things in realtime. In my case I’m returning search results while the user is typing.
The last piece of getting all of this to work is to include the livewire component in a another blade component. So in my case I included the SearchItunes component in the welcome.blade.php view like so:
<body class="antialiased">
@livewire('search-itunes')
More on how to include livewire components.
Livewire in action
I built a pretty simple example that uses iTunes’ public search API to search for music. You’ll realize how little code was necessary to make it all work.
Here it is working:
Learn from the code I wrote
If you’re looking for a working example that you could use as a starting point I’ve uploaded the entire project to Github here.
For a higher level explanation I made a Youtube video. Hope you enjoy it.