Learn about Livewire in Laravel
- Tram Ho
Introduce
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simpler. This is a great stack to choose from if you want to build a SPA but find it difficult to learn about frameworks like React.js and Vue.js.
To better understand Livewire and how it works, let’s build a live search user application. Let’s get started right away.
Install project and create database
The current Livewire 2.x version requires laravel 7.0 so we will create a laravel 7 project
1 2 | composer create-project --prefer-dist laravel/laravel:^7.0 livewire |
Using seeder and factory to generate data for user table
1 2 3 4 5 6 7 8 | class DatabaseSeeder extends Seeder { public function run() { factory(App\User::class, 20)->create(); } } |
Run migrate and seeder to generate data
1 2 3 | php artisan migrate php artisan db:seed |
Install Livewire
Install package livewire via command
1 2 | composer require livewire/livewire |
Create config file of livewire
1 2 | php artisan livewire:publish --config |
Create livewire’s assets file in public
1 2 | php artisan livewire:publish --assets |
Component creation and application deployment
We will create a Search component to serve the search and display the list of users
1 2 | php artisan make:livewire Search |
When creating the Search component, Livewire will create two files:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Livewire</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Livewire<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Search</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'livewire.search'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 | <span class="token operator"><</span>div<span class="token operator">></span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Looking at the code of the two files we can see that the render function of the Search class is used to display the view of the search component.
We need to edit the above two files to perform the live search function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Livewire</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Livewire<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Search</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token variable">$search</span> <span class="token operator">=</span> <span class="token single-quoted-string string">''</span><span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'livewire.search'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'users'</span> <span class="token operator">=</span><span class="token operator">></span> User<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'like'</span><span class="token punctuation">,</span><span class="token single-quoted-string string">'%'</span><span class="token punctuation">.</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">search</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'%'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 | <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input wire<span class="token punctuation">:</span>model<span class="token operator">=</span><span class="token double-quoted-string string">"search"</span> type<span class="token operator">=</span><span class="token double-quoted-string string">"text"</span> placeholder<span class="token operator">=</span><span class="token double-quoted-string string">"Search users..."</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>ul<span class="token operator">></span> @<span class="token keyword">foreach</span><span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> @<span class="token keyword">endforeach</span> <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
We can see the important keyword is wire:model="search"
,This is a directive of Livewire. It works every time the value in the input tag changes, the search attribute in the Search class will change according to the input tag’s value as long as the search attribute is public. For example, we enter the input box a string "Quang"
then value $search = "Quang"
and $search
will be updated continuously as we enter.
when the $search
change means that Livewire has sent an ajax request to the server, then the function render()
will run and update the list of users found by variable $search
and return data to the search component component
Create a file list-user.blade.php and a route to display the input box and the list of users.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token operator"><</span>html<span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> @livewireStyles <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"container"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"row justify-content-center"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"col-md-8"</span><span class="token operator">></span> @<span class="token function">livewire</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'search'</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> @livewireScripts <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> |
1 2 3 4 | Route::get('/users', function () { return view('list-user'); }); |
Inside @livewireStyles
and @livewireScripts
used to include Livewire’s css and js in the website, and @livewire('search')
used to include component search.
Open your browser and see the result.
If you have problems with the website not working, maybe your website can’t initialize new Livewire() because the livewire javascript embedding process in the website is faulty, can’t find the correct path to the js file. Go to this file
config/livewire.php
and edit key'asset_url' = env('APP_URL')
, replace byenv('APP_URL')
with a specific link corresponding to your project.
Some commonly used Directives of Livewire
wire:click="foo"
Receive the mouse click event and run the foo function inside the component.wire:keydown.enter="foo"
Receive keydown event of enter key and run function foo inside Component.wire:foo="bar"
Listen for a browser event called “foo”. (You can listen to any browser DOM events – not just those triggered by Livewire).wire:model="foo"
Suppose$foo
is a public property on the component class, every time an input element with this directive is updated, the attribute will synchronize with its value.wire:init="foo"
Run the foo() method in the component as soon as it renders on the web page.
Summary
So we have completed a simple live search application with live wire. Through the implementation process, it can be seen that Livewire is a powerful framework that is quite easy to use and has many features, worth researching in the future. Thank you for following the article, hope we will see you in the next article.
References: https://laravel-livewire.com/