Introduction to Laravel Livewire

With the complexity and limitations of traditional web development using Laravel there are so many attempts to make the experience of developing interactive application more axciting.

In this article we will learn about making interactive web UI's in Laravel with Livewire.

What is Laravel Livewire?

Laravel livewire is a library to make your laravel component has more super power. With livewire we can implement reactive component just like react and vue does but without writing any javascript. All the work will be done by php in the server.

Livewrite use combination of php and ajax to create realtime interaction between frontend and backend. Here's how livewire works.

• Livewrite will render the initial component as usual html, so you don't have to worry about SEO etc.
• When action trigerred by the user livewiew will make ajax request to the server and update the component, this way it will not re-render all the component when that action happen.
• Behind the scene when livewire run an ajax request it will return html, then livewire will do some dom mutation to update the html in the frontend.

How to install Livewire?

Installing livewire is very straightforward. In your root project folder run this command:

composer require livewire/livewire

After installation let's try to create our first component by running this command:

$ php artisan make:livewire like-dislike

If it works you will see this in your terminal.

COMPONENT CREATED  🤙

CLASS: app/Livewire/LikeDislike.php
VIEW:  resources/views/livewire/like-dislike.blade.php

  _._
/ /o\ \   || ()                ()  __
|_\ /_|   || || \\// /_\ \\ // || |~~ /_\
 |`|`|    || ||  \/  \\_  \^/  || ||  \\_


Congratulations, you've created your first Livewire component! 🎉🎉🎉

Component

When we create livewire component we will see two files created.

1. app/Livewire/LikeDislike.php
2. resources/views/livewire/like-dislike.blade.php

Php class LikeDislike will be used to define our state for this component, we can for example define like count and dislike count. For example we might define initial state of like-dislike component like this.

class LikeDislike extends Component
{

    public $likeCount = 0;
    public $dislikeCount = 0;

    public function render()
    {
        return view('livewire.like-dislike');
    }
}

Not like rendering view from controller any variable defined as public properties inside LikeDislike component will be passed to the blade view.

<div>
    <p>
        Like: {{ $likeCount }}
    </p>
    <p>
        DisLike: {{ $dislikeCount }}
    </p>
</div>

Interactive

We can make the blade view interactive by registering action to the component class. To create action we can just write public function in our class component.

class LikeDislike extends Component
{
    public $likeCount = 0;
    public $dislikeCount = 0;

    public function incrementLike() {
        $this->likeCount++;
    }

    public function incrementDisLike() {
        $this->dislikeCount++;
    }
    ...
}

Then to dispatch the action from blade component we can use wire:click directive, this will perform ajax request when the element is clicked.

<div>
  <p>
    Like: {{ $likeCount }}
    <button wire:click="incrementLike">+ like</button>
  </p>
  <p>
    DisLike: {{ $dislikeCount }}
    <button wire:click="incrementDisLike">+ dislike</button>
  </p>
</div>

Conclusion

Livewire is just blade with more features, if you familiar with blade it should be easy to learn livewire. With livewire you can enjoy your time writing just php code, no need to think about writing javascript to make our component interactive.

See offical documentation to learn more about livewire.