Laravel 10/9 livewire click event example; Through this tutorial, i am going to show you how to add or implement click event using livewire in Laravel 10/9 apps.
Laravel 10/9 Livewire Add or Implement Click Event Tutorial
Follow the below given steps to implement or add click event using livewire in Laravel 10/9 apps:
- Step 1: Install Laravel 10/9 App
- Step 2: Configure Database with App
- 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 10/9 App
Run following command on command prompt to install laravel fresh app for laravel app:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Configure Database with App
Configure 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
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; } }
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>
Step 5: Add Route For Livewire Click Event
Go 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
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 10/9 Click Event Livewire Example - Laratutorials.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>
Step 7: Run Development Server
Run the PHP artisan serve command on command prompt to start your laravel livewire click event 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 livewire click event app. So open your browser and hit the following URL into your browser:
http://localhost:8000/click-event
Be First to Comment