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

Using seeder and factory to generate data for user table

Run migrate and seeder to generate data

Install Livewire

Install package livewire via command

Create config file of livewire

Create livewire’s assets file in public

Component creation and application deployment

We will create a Search component to serve the search and display the list of users

When creating the Search component, Livewire will create two files:

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

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.

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 by env('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/

Share the news now