Quickstart

Install Livewire

Include the PHP.

composer require livewire/livewire

Include the JavaScript (on every page that will be using Livewire).

...
    @livewireAssets
</head>
<body>
    ...
</body>
</html>

Create a component

Run the following command to generate a new Livewire component called counter.

php artisan make:livewire counter

Running 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.

Livewire components MUST have a single root element.
<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>
    ...
    @livewireAssets
</head>
<body>
    @livewire('counter')
</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 🧙‍♂.️

Next Topic →

The Livewire Developer