How To Install Livewire 3
Hello friends in this post i will share you how to install livewire 3 beta in laravel project.
when you try to install livewire 3 in project you may be face this error –
Prerequisite for Livewire 3
Before we start, make sure you have the following installed:
- Laravel version 10 or later
- PHP version 8.1 or later
Livewire 3 install Error
Your requirements could not resolved to an installable set of package
lets start first create a fresh laravel project
laravel new project nameOpen project your code editor
go to composer.js file
under require object add this
"livewire/livewire" :"^3.0@beta"
Your composer.json file look like this
"require": {
"php": "^8.1",
"guzzlehttp/guzzle": "^7.2",
"laravel/framework": "^10.10",
"laravel/sanctum": "^3.2",
"laravel/tinker": "^2.8",
"livewire/livewire" :"^3.0@beta"
},then open terminal
composer updateThen create livewire component
php artisan make:livewire counterGo to App/Livewire/Counter.php
public $count = 1;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
After your counter.php code look like this
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 1;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}
Then to go to resources/views/livewire/counter.blade.php
<div class="d-flex">
<button wire:click="increment" class="btn btn-success">Increment+</button>
<h1 class="m-2">{{ $count }}</h1>
<button wire:click="decrement" class="btn btn-danger">Decrement-</button>
</div>
Then go to welcome.blade.php under resources.views folder
<livewire:counter/>
Your welcome blade file like this below here i am using bootstrap 5 for design
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Livewire 3</title>
</head>
<body>
<div class="container mt-2">
{{-- @livewire('counter') --}}
<livewire:counter/>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Then run server
php artisan serve
Go to browser
http://127.0.0.1:8000/
press plus and minus button check result.
thanks for reading
