Introduction
Laravel Livewire is a powerful framework that simplifies building dynamic interfaces using Laravel. It enables you to create fully interactive components without writing any JavaScript. In this guide, we'll walk through the process of starting with Laravel Livewire by building a basic counter component.
1. Installing Livewire
To get started, you need to install Livewire in your Laravel application. From the root directory of your Laravel project, run the following command:
composer require livewire/livewire
2. Creating a Livewire Component
Livewire makes it easy to create components with a single Artisan command. To create a new counter component, use the following command:
php artisan make:livewire counter
This command generates two files:
-
app/Livewire/Counter.php— The component class. -
resources/views/livewire/counter.blade.php— The Blade view for the component.
3. Writing the Component Class
Open the app/Livewire/Counter.php file and update it as follows:
<?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');
}
}
Key Features of the Code:
-
Public Property:
$countis a public property initialized to1. Livewire tracks changes to public properties and updates the DOM accordingly. -
Methods:
increment()anddecrement()are public methods to modify the$countvalue. These methods are callable directly from the Blade template. -
Render Method: The
render()method returns the associated Blade view for rendering the component.
4. Creating the Blade View
Open the resources/views/livewire/counter.blade.php file and replace its content with:
<div>
<h1>{{ $count }}</h1>
<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>
</div>
This view:
- Displays the current value of
$count. - Includes buttons that trigger the
increment()anddecrement()methods via Livewire'swire:clickdirective.
5. Registering a Route
To view your component in the browser, register a route that maps to it. Open routes/web.php and add the following:
use App\Livewire\Counter;
Route::get('/counter', Counter::class);
When a user visits /counter, Laravel will render the Counter component.
6. Creating a Template Layout
Livewire components need a layout to render within. By default, Livewire looks for a layout file at resources/views/components/layouts/app.blade.php.
If the file doesn’t exist, generate it using this command:
php artisan livewire:layout
This creates a layout file with the following content:
<!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>
Livewire will automatically inject its necessary JavaScript and CSS assets into your layout.
7. Testing the Component
Now, it's time to test your Livewire component! Start your Laravel development server:
php artisan serve
Visit /counter in your browser. You should see:
- A number displayed on the screen (initially
1). - Two buttons to increment and decrement the number.
Clicking the buttons dynamically updates the value of $count without requiring a page reload.
Conclusion
You've successfully built your first Livewire component! With Livewire, you can create dynamic, real-time interfaces with minimal effort, harnessing the full power of Laravel. This simple counter is just the beginning—explore Livewire’s extensive features to build more complex, interactive components.
Top comments (0)