Laravel 10 Livewire Add or Implement Click Event Tutorial

Last Updated on by in Laravel

Throughout this quick laravel livewire click events tutorial, you will ascertain how to add click events in the laravel application using the livewire package.

We will install the livewire package, set it up in the laravel app, create livewire components, create two buttons, and implement the click events in the laravel livewire app.

How to Integrate Click Event in Laravel 10 Livewire

  • Step 1: Set Up Laravel Project
  • Step 2: Add Database Credentials in ENV
  • Step 3: Install and Set Up Livewire Package
  • Step 4: Generate and Configure Click Event Component
  • Step 5: Create Route
  • Step 6: Construct Blade View
  • Step 7: Start Laravel App

Set Up Laravel Project

Firstly, make sure to install and configure the Composer tool on your system; its a handy dependency management exclusively built for PHP. After that, create the laravel project using the below command.

composer create-project --prefer-dist laravel/laravel laravel_demo

Next, get inside the project’s root:

cd laravel_demo

Add Database Credentials in ENV

You have to subsequently add the database name, database username and database password in the main configuration file. So, open and update the following code in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

If you are using MAMP local server in macOs; make sure to append UNIX_SOCKET and DB_SOCKET below database credentials in .env file.

UNIX_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock

Install and Set Up Livewire Package

Next, use the mentioned below command to install the Laravel Livewire package in the laravel app. This package supercharges the process of creating modern, reactive, dynamic interfaces using Laravel Blade.

composer require livewire/livewire

Generate and Configure Click Event Component

To handle click events in laravel livewire, consequently, we need to generate the click event component. Head over to the command prompt and execute the following command and create the livewire component.

php artisan make:livewire click

The livewire php artisan command has generated two new files; here are the Livewire component files’ paths.

app/Http/Livewire/Click.php

resources/views/livewire/click.blade.php

Let us open the app/Http/Livewire/Click.php file and update the suggested code inside the file.

<?php

namespace App\Http\Livewire;
use Livewire\Component;

class Click extends Component
{
    public $msg = '';
    public $studentId = 55;
   
    public function render()
    {
        return view('livewire.click')->extends('app');
    }
   
    public function clickEvt()
    {
        $this->msg = "Button has been clicked.";
    }
   
    public function trackClickEvt($studentId)
    {
        $this->msg = $studentId;
    }
}

Next, you have to prepare the livewire view, open resources/views/livewire/click.blade.php file and create two buttons for seeing the click event in action. So, make sure to add the recommended code within the file.

<div class="container mt-5 text-center">
    <button type="button" wire:click="clickEvt" class="btn btn-primary">Click Here</button>

    <button type="button" wire:click="trackClickEvt({{$studentId}})" class="btn btn-success">Click Here</button>

    <p class="mt-4">{{ $msg }}</p>
</div>

Create Route

This step involves setting up routes for checking the click event, hence open routes/web.php file and add the below code inside of it.

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/

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

Construct Blade View

Next, you require to add the Bootstrap CSS and JavaScript in the blade view file. Head over to resources/views folder and create the app.blade.php file.

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

<!DOCTYPE html>
<html>

<head>
    <title>Laravel 8 Livewire Click Event Demo</title>
    @livewireStyles
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

    <div class="container">
        @livewire('click')
    </div>

</body>

@livewireScripts

</html>

Start Laravel App

Last but not least, start the laravel livewire application through the command prompt to verify how the click events are working in laravel application.

Execute the given below command:

php artisan serve

Use the following url to test the app:

http://127.0.0.1:8000/check-click-event

Laravel Livewire Click Event Integration

Conclusion

Laravel gives easiness when it comes to faster and flexible development.

In addition to the development journey, we have learned how to set up click events in the laravel app through a fundamental yet agile method. We consider it will assist you in understanding the laravel ecosystem better.