Laravel Livewire Click Event Example

Laravel 8 livewire click event tutorial example. In this example you will learn how to implement click event with livewire in laravel 8 app.

This tutorial will help you for how to implement click event with livewire in laravel 8 app.

Laravel 8 Livewire Click Event Example

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, Open your terminal OR command prompt and run following command to install laravel fresh app for laravel livewire file upload app:

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

Step 2: Add Database Detail

In this step, Add database credentials in the .env file. So open your project root directory and find .env file. Then add database detail in .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

Now, open your command prompt and run the following command to create the table into your database:

php artisan migrate

Step 3: Install Livewire Package

In this step, you need to install livewire package to your laravel project using the following command:

composer require livewire/livewire

Step 4: Create Click Event Component using Artisan

In this step, create the livewire components for creating a livewire click event component using the following command. So Open your cmd and run the following command:

php artisan make:livewire clickEvent

This command will create the following components on the following path:

app/Http/Livewire/ClickEvent.php

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

Now, Navigate 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;
    }
}

After that, Navigate 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>

Step 5: Add Route For Livewire Click Event

In this step, Navigate to routes folder and open web.php. Then add the following routes into your web.php file:

<?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, navigate 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 - Tutsmake.com</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>

Note that, if you want to add HTML(blade views), CSS, and script code into your livewire files. So, you can use @livewireStyles, @livewireScripts, and @livewire(‘ blade views’).

Step 7: Run Development Server

Finally, you need to run the following PHP artisan serve command to start your laravel livewire upload file app:

php artisan serve

If you want to run the project diffrent port so use this below command 

php artisan serve --port=8080

Now, you are ready to run laravel 8 livewire click event app. So open your browser and hit the following URL into your browser:

localhost:8000/click-event

Subscribe to Blog via Email