How to Create Livewire Click Event in Laravel 9 App

In this quick guide, you will find out the eloquent way to create livewire click events in the Laravel app.

Implement the livewire library in laravel, generate livewire components, and tie livewire components to view. Rest assured, all the topics will be addressed in this laravel livewire click events tutorial.

Do you love the Laravel Livewire package, off-course you do? Livewire offers the pragmatic approach for agile laravel development; the intuitive mechanism of livewire gives gratification to developers toward laravel application development.

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces uncomplicated without omitting the ease of Laravel.

How to Add Livewire Click Event in Laravel 9

Let’s straight away start adding livewire click event in the laravel app.

  • Step 1: Download Laravel App
  • Step 2: Connect to Database
  • Step 3: Configure Livewire in Laravel
  • Step 4: Create Livewire Component
  • Step 5: Register Route
  • Step 6: Integrate Click Event in View
  • Step 7: Run Laravel Project

Download Laravel App

Having a basic laravel app on your system is the first requirement; if you already have no problem, else execute the given command.

Moreover, move towards the newly downloaded app’s root.

composer create-project --prefer-dist laravel/laravel laravel_livewire_click
cd laravel_livewire_click

Connect to Database

In the second section, we will demonstrate how to connect laravel to MySQL database by adding database credentials in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password

Configure Livewire in Laravel

Livewire is easy to install; the installation task can be completed with just a single command.

Type the command, hit enter, and let the prodigy install into your laravel app.

composer require livewire/livewire

Create Livewire Component

Livewire comes with its own components (controller/view), and you can generate components and view files dynamically.

Head over to console, and run the below command to generate livewire components.

php artisan make:livewire click

After executing the provided command, the following files have been created

CLASS: app/Http/Livewire/Users.php

VIEW: resources/views/livewire/users.blade.php

Subsequently, you will set up the livewire component.

Next, get into the app/Http/Livewire/Users.php, define functions and variables for setting up livewire click event, make sure to replace the current code with the old code.

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Users extends Component
{
    public function render()
    {
        return view('livewire.users')
               ->layout('app');
    }

    public $alertMessage = '';
    public $user_id = 999;
   
    public function createClick()
    {
        $this->alertMessage = "You just clicked";
    }
   
    public function clickEvent()
    {
        dd('User id: 99');
    }    
}

Register Route

Route will connect the component to view, also allow executing the functions defined in the livewire controller file.

Hence, without further ado update the routes/web.php file.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Users;


Route::get('get-click-event', Users::class);

Integrate Click Event in View

Ensure that you have added the following code inside the resources/views/users.blade.php file.

<div>
    <button type="button" wire:click="createClick" class="btn btn-dark">Click on me</button>
    <button type="button" wire:click="clickEvent" class="btn btn-danger mb-3">Click on me</button>
    <p><strong>{{ $alertMessage }}</strong></p>
</div>

Ultimately, you have to create an app.blade.php file in the views folder.

Immediately after creating the file, create a new app.blade.php file in views folder.

Further, go ahead and place the provided code into the resources/views/app.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <title>Laravel Livewire Click Event Example</title>
    @livewireStyles
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <div class="container mt-4">
        @livewire('users')
    </div>
</body>
@livewireScripts
</html>

Run Laravel Project

To check the click event, you need to run the laravel app; for viewing the app, use the provided url.

php artisan serve
http://127.0.0.1:8000/get-click-event

Set Livewire Click Event Handler in Laravel

Conclusion

Using Livewire in Laravel could be a better choice; however, sometimes, we have to work a little hard to understand the working process.

Similarly, in this tutorial, we revealed how to set up livewire click handler events to communicate with the controller in the laravel app.