Complete Beginners Guide on Laravel Livewire Events

Hello devs in this tutorial i am going to discuss about Laravel livewire events. You already know that Livewire components can communicate with each other through a global event system. As long as two Livewire components are living on the same page, they can communicate using events and listeners.

If you already worked with vue events then livewire events is going to be almost same thing i think. If you use larave livewire already then you know about that Laravel Livewire simplifies so many aspects of building out your Laravel application.

Livewire makes it easy to send data from the client to the server and from the server back to the client.In this quick example tutorial, I’ll show you how easy it is to send data back and forth from the client and the server.

Client To The Server with Livewire

In laravel livewire sending events from the client to the server can easily be accomplished with a wire:click event like

This is covered in the Livewire Actions Documentation, but what if we wanted to call a PHP function from vanilla javascript? Simple enough, we can utilize Livewire Events to do that like so:

After doing that steps, inside of our PHP code, you’ll need to register an event listener that maps to a function:

protected $listeners = ['say-hello' => 'sayHello'];

public function sayHello()
{
    // your code here
}

Recommended : Laravel 7.x Livewire Form Submit Example Tutorial

That’s the simplest and very easy way for your front-end to talk to your back-end. Next, we’ll see how we can send an event from the back-end to the front-end in this tutorial with laravel livewire events.

Server to the Client with Livewire

Sending events from the server to the client can be done by utilizing the dispatchBrowserEvent function in laravel livewire. See the example like so:

public function sayGoodbye()
{
    $this->dispatchBrowserEvent('say-goodbye', []);
}

Then, we can register an even listener in javascript to catch this event like below

And that’s it 🙌 Finally, you may like to know how to send data between the sever to clinet and client to server.

Sending Data to the Server

In our previous code example, we can easily pass data to the server with the following javascript code:

Read also : Laravel Livewire Dynamically Add More Input Fields Example

And we can access that data from the first argument in our function:

protected $listeners = ['say-hello' => 'sayHello'];

public function sayHello($payload)
{
    $name = $payload['name'];
    // your code here
}

That’s great, right? Next step, we’ll also need a way to pass data from our server to our client.

Sending Data to the Client

We already seen before that we can easily send data from our PHP code to our front-end by sending it in the array of our dispatchBrowserEvent function:

public function sayGoodbye()
{
    $this->dispatchBrowserEvent('say-goodbye', ['name' => 'John']);
}

And we can capture that data in javascript by fetching the event.detail variable.

Read also : Laravel 8.x Livewire CRUD Tutorial Step by Step

Hope it can help you to pass data from client to server and server to client. Now you know how to pass data client to server and server to clinet using Laravel livewire.