Laravel 8 Livewire Click Event Tutorial Example

In this tutorial you will learn about the Laravel 8 Livewire Click Event Tutorial Example and its application with practical example.

In this Laravel 8 livewire click event tutorial example tutorial I will show you how to implement click event with livewire in laravel 8 application. In this tutorial you will learn to implement or create click event using livewire in laravel 8. In this article I will share example to create livewire click event in laravel.

Table Of Contents−

Laravel 8 Livewire Click Event Tutorial Example

In this step by step tutorial I will demonstrate you how to implement click event with livewire in laravel 8 application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Add Database Detail

Step 3: Install Livewire Package
Step 4: Create Click Event Component using Artisan
Step 5: Add Route For Livewire Click Event

Step 6: Create View File
Step 7: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Add Database Detail

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql  
DB_HOST=127.0.0.1  
DB_PORT=3306  
DB_DATABASE=here your database name here 
DB_USERNAME=here database username here 
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Step 3: Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Step 4: Create Click Event Component using Artisan

Now we will create a livewire click event component using following artisan command:

php artisan make:livewire clickEvent

1	php artisan make:livewire clickEvent

The above command will create the following components on the following path:

app/Http/Livewire/ClickEvent.php

resources/views/livewire/click-event.blade.php

app/Http/Livewire/ClickEvent.php

resources/views/livewire/click-event.blade.php

Now, go to app/Http/Livewire folder and open ClickEvent.php file. Then add the following code into your ClickEvent.php file:

<?php
   
namespace App\Http\Livewire;
   
use Livewire\Component;
   
class ClickEvent extends Component
{
    public $message = '';
    public $user_id = 42;
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.click-event')->extends('layouts.app');
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function callFunction()
    {
        $this->message = "You clicked on button";
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function callFunctionArg($user_id)
    {
        $this->message = $user_id;
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ClickEvent extends Component

{

public $message = '';

public $user_id = 42;

/**

* Write code on Method

* @return response()

public function render()

{

return view('livewire.click-event')->extends('layouts.app');

}

/**

* Write code on Method

* @return response()

public function callFunction()

{

$this->message = "You clicked on button";

}

/**

* Write code on Method

* @return response()

public function callFunctionArg($user_id)

{

$this->message = $user_id;

}

Now, go to resources/views/livewire folder and open click-event.blade.php file. Then add the following code into your click-event.blade.php file:

<div>
    <button type="button" wire:click="callFunction" class="btn btn-danger">Click Me</button>
    <button type="button" wire:click="callFunctionArg({{$user_id}})" class="btn btn-danger">Click Me!</button>
       
    <p>{{ $message }}</p>
</div>

<div>

<button type="button" wire:click="callFunction" class="btn btn-danger">Click Me</button>

<button type="button" wire:click="callFunctionArg({{$user_id}})" class="btn btn-danger">Click Me!</button>

<p>{{ $message }}</p>

</div>

Step 5: Add Route For Livewire Click Event

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php
   
use Illuminate\Support\Facades\Route;
  
use App\Http\Livewire\ClickEvent;
   
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::get('click-event', ClickEvent::class);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Livewire\ClickEvent;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

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

Step 6: Create View File

In this step we will create blade view file. Go to resources/views/livewire folder and create one blade view files that name app.blade.php file. Then add the following code into your app.blade.php file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 8 Click Event Livewire Example</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
     
<div class="container">
    @yield('content')
</div>
     
</body>
   
@livewireScripts
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8 Click Event Livewire Example</title>

@livewireStyles

</head>

<body>

@yield('content')

</div>

</body>

@livewireScripts

</html>

Step 7: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

localhost:8000/click-event

1	localhost:8000/click-event

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Livewire Click Event Tutorial Example