Quickstart
Install Livewire
Include the PHP.
composer require livewire/livewireInclude the JavaScript (on every page that will be using Livewire).
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>Create a component
Run the following command to generate a new Livewire component called counter.
php artisan make:livewire counterRunning this command will generate the following two files:
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}<div>
...
</div>Let's add some text to the view so we can see something tangible in the browser.
<div>
<h1>Hello World!</h1>
</div>Include the component
Think of Livewire components like Blade includes. You can insert @livewire anywhere in a Blade view and it will render.
<head>
...
@livewireStyles
</head>
<body>
@livewire('counter')
...
@livewireScripts
</body>
</html>View it in the browser
Load the page you included Livewire on in the browser. You should see "Hello World!".
Add "counter" functionality
Replace the generated content of the counter component class and view with the following:
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
<button wire:click="decrement">-</button>
</div>View it in the browser
Now reload the page in the browser, you should see the counter component rendered. If you click the "+" or "-" button, the page should automatically update without a page reload. Magic 🧙♂.️
Installation
Sponsors
