Quickstart
To begin your Livewire journey, we will create a simple "counter" component and render it in the browser. This example is a great way to experience Livewire for the first time as it demonstrates Livewire's liveness in the simplest way possible.
Prerequisites
Before we start, make sure you have the following installed:
- Laravel version 10 or later
- PHP version 8.1 or later
Install Livewire
From the root directory of your Laravel app, run the following Composer command:
composer require livewire/livewire
Create a Livewire component
Livewire provides a convenient Artisan command to generate new components quickly. Run the following command to make a new Counter
component:
php artisan make:livewire counter
This command will generate two new files in your project:
-
App/Livewire/Counter.php
-
resources/views/livewire/counter.blade.php
Writing the class
Open app/Livewire/Counter.php
and replace its contents with the following:
<?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'); }}
Here's a brief explanation of the code above:
-
public $count = 1;
— Declares a public property named$count
with an initial value of1
. -
public function increment()
— Declares a public method namedincrement()
that increments the$count
property each time it's called. Public methods like this can be triggered from the browser in a variety of ways, including when a user clicks a button. -
public function render()
— Declares arender()
method that returns a Blade view. This Blade view will contain the HTML template for our component.
Writing the view
Open the resources/views/livewire/counter.blade.php
file and replace its content with the following:
<div> <h1>{{ $count }}</h1> <button wire:click="increment">+</button> <button wire:click="decrement">-</button></div>
This code will display the value of the $count
property and two buttons that increment and decrement the $count
property, respectively.
Register a route for the component
Open the routes/web.php
file in your Laravel application and add the following code:
use App\Livewire\Counter; Route::get('/counter', Counter::class);
Now, our counter component is assigned to the /counter
route, so that when a user visits the /counter
endpoint in your application, this component will be rendered by the browser.
Create a template layout
Before you can visit /counter
in the browser, we need an HTML layout for our component to render inside. By default, Livewire will automatically look for a layout file named: resources/views/components/layouts/app.blade.php
You may create this file if it doesn't already exist by running the following command:
php artisan livewire:layout
This command will generate a file called resources/views/components/layouts/app.blade.php
with the following contents:
<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ $title ?? 'Page Title' }}</title> </head> <body> {{ $slot }} </body></html>
The counter component will be rendered in place of the $slot
variable in the template above.
You may have noticed there is no JavaScript or CSS assets provided by Livewire. That is because Livewire 3 and above automatically injects any frontend assets it needs.
Test it out
With our component class and templates in place, our component is ready to test!
Visit /counter
in your browser, and you should see a number displayed on the screen with two buttons to increment and decrement the number.
After clicking one of the buttons, you will notice that the count updates in real-time, without the page reloading. This is the magic of Livewire: dynamic frontend applications written entirely in PHP.
We've barely scratched the surface of what Livewire is capable of. Keep reading the documentation to see everything Livewire has to offer.