How to Install Livewire on Laravel 10
Livewire is a full-stack framework for Laravel that makes it easy to build dynamic and interactive web applications with Laravel and Alpine.js. Livewire lets you write Laravel code that manipulates the DOM as if you were writing Vue or React. In this tutorial, we will show you how to install Livewire on Laravel 10 and create a simple counter component.
Prerequisites
Before you start, you need to have the following:
- A Laravel 10 application installed and running
- PHP 8.0 or higher installed with the required extensions
- Composer installed globally
You can check the versions of Laravel and PHP by running the following commands:
php artisan --version
php -v
You can install Composer by following the instructions on its official website.
Step 1: Install Livewire
To install Livewire, you need to open your terminal and navigate to your Laravel application directory, then run the following command:
composer require livewire/livewire
This will install the latest version of Livewire and all its dependencies.
Step 2: Include Livewire’s Frontend Assets
Livewire requires some JavaScript and CSS assets to work properly. You need to include these assets in your Blade template by using the following directives:
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
These directives will inject the necessary scripts and styles for Livewire. You can also use the tag syntax instead:
<livewire:styles />
...
<livewire:scripts />
Note that Livewire bundles Alpine.js with its JavaScript assets, so you don’t need to include Alpine.js separately.
Step 3: Create a Livewire Component
Livewire components are the building blocks of your web application. They consist of two parts: a PHP class and a Blade view. You can create a Livewire component by using the artisan make:livewire command. For example, to create a component named counter, you can run the following command:
php artisan make:livewire counter
This will generate two files in your application:
app/Http/Livewire/Counter.php: The PHP class that contains the logic and data of your component.resources/views/livewire/counter.blade.php: The Blade view that contains the HTML and Alpine.js code of your component.
You can edit these files to customize your component. For example, you can add a public property named $count and a public method named increment to your Counter.php file:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
Then, you can add a button and a span to your counter.blade.php file:
<div>
<button wire:click="increment">+</button>
<span>{{ $count }}</span>
</div>
The wire:click directive tells Livewire to call the increment method when the button is clicked. The {{ $count }} expression displays the value of the $count property.
Step 4: Render a Livewire Component
To render a Livewire component on a page, you need to use the @livewire directive or the tag syntax. For example, to render the counter component on the welcome page, you can edit the resources/views/welcome.blade.php file and add the following code:
@livewire('counter')
Or:
<livewire:counter />
You can also pass data to your component by using the : syntax. For example, to pass an initial value of 5 to the $count property, you can write:
@livewire('counter', ['count' => 5])
Or:
<livewire:counter :count="5" />
Step 5: Test Your Livewire Component
Now that you have created and rendered your Livewire component, you can test it by opening your web browser and visiting the URL of your page, such as http://localhost or http://127.0.0.1. You should see a button and a span with the value of 0 or 5, depending on what you passed to your component. If you click the button, the value should increase by one without reloading the page. This means that your Livewire component is working as expected.
Congratulations, you have successfully installed Livewire on Laravel 10 and created a simple counter component. You can now explore the other features and possibilities of Livewire by reading the official documentation. Happy coding!
English