Laravel video tutorial: Discover Livewire

I suggest you discover together Livewire, a tool running on Laravel which will allow you to create dynamic components without using JavaScript.

What does it look like

First, we will create a class that will represent our component and its state. All the public properties of this component will be exposed and manipulated by the client and a method render () allows you to generate a new HTML version of the component.

use Livewire  Component;

class SearchUsers extends Component
    public $ search = '';

    public function render ()
        return view ('', (
            'users' => User :: where ('username', $ this-> search) -> get (),

Then in the view, it will be possible to use special attributes understood by livewire which will allow to communicate with our component.

    @foreach ($ users as $ user)
  • {{$ user-> username}}
  • @endforeach

Finally, we can now use the component in any page:

    @livewire ('search-users')


When the user enters a search in the field, the view will automatically update to display only the users corresponding to the search.

How it works ?

Livewire relies primarily on the server to manage component state changes.

  • Livewire renders the initial component with the page (like a simple template blade).
  • During user interaction, livewire makes an AJAX call to the server with the data to update.
  • The server renders the new HTML version of the component and sends it back to the client.
  • Livewire receives the new HTML structure and modifies the DOM based on the elements that have changed.

However, this approach has a limitation important: Each interaction results in a round trip with the server. Also, you will have to pay attention to what you control with Livewire and use AlpineJS for micro-interactions that do not require server intervention.