Laravel framework is primarily used to create backends and APIs. Traditionally, it can leverage PHP to build frontends using blade template system. However, in order to build more interactive web pages developer may prefer to use Javascript frameworks such as Vue and React.
If you prefer to use Vue and/or React a tool named Inertia bridges the gap between your Laravel application and your modern Vue or React frontend. We will check other tool in this post though.
Livewire
Laravel Livewire is a framework for building Laravel powered frontends that feel dynamic, modern, and alive just like frontends built with modern JavaScript frameworks like Vue and React. – Laravel Documentation says.
When using Livewire, you will create Livewire “components” that render a discrete portion of your UI and expose methods and data that can be invoked and interacted with from your application’s frontend. For example, a simple “Counter” component might look like the following:
In this short tutorial we will see how to create a simple Laravel frontend with help of Livewire.
Create new laravel project
composer create-project laravel/laravel laravel-frontend
or
composer global require laravel/installer laravel new laravel-frontend
After installation is done run the server
php artisan serve
Your Laravel app will be running on http://127.0.0.1:8000 or http://localhost:8000
Livewire
Accoring to Laravel documentation “Within the Laravel ecosystem, the need to create modern, dynamic frontends by primarily using PHP has led to the creation of Laravel Livewire and Alpine.js.”
Laravel Livewire is a framework for building Laravel powered frontends that feel dynamic, modern, and alive just like frontends built with modern JavaScript frameworks like Vue and React.
Create route
In our example we will use http://localhost:8000/counter URL to view our new counter livewire application. To do so, lets create a route and a view file for our counter.
Add a new route to routes/web.php routes file
Route::get('/counter', function () {
return view('counter');
});Add a new view file resources/views/counter.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Livewire Counter Example</title>
</head>
<body>
<h1>Livewire Counter Example</h1>
</body>
</html>
Install Livewire
composer require livewire/livewire
Include @livewireStyles in <head> section and @livewireScripts just before the closing body tag </body> of our resources/views/counter.blade.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Livewire Counter Example</title>
@livewireStyles
</head>
<body>
<h1>Livewire Counter Example</h1>
@livewireScripts
</body>
</html>Create Livewire Counter Component
php artisan make:livewire counter
Running the above command will generate the following two files:
app/Http/Livewire/Counter.php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}and, resources/views/livewire/counter.blade.php
<div>
{{-- A good traveler has no fixed plans and is not intent upon arriving. --}}
</div>Let’s update this view file so that we can see it in the browser
<div>
<h2>Hello World!</h2>
</div>Include the component
Livewire components are like blade template’s includes. A Livewire component can be included by using livewire selector and the component name as a pseudo-tag. For example, using <livewire:some-component /> anywhere in a blade view and it will render.
Lets include our counter component in the resources/views/counter.blade.php view file
<!DOCTYPE html>
<html lang="en">
<head>
...
@livewireStyles
</head>
<body>
...
<livewire:counter />
@livewireScripts
</body>
</html>
It should show “Hello World!”
Livewire Counter Example Hello World!
Add counter functionality
Let’s add actual counter functionality to our new counter. I will add just “add” functionality.
Edit app/Http/Livewire/Counter.php to add a $count variable and an increment method to our Counter class
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');
}
}Update the resources/views/livewire/counter.blade.php file to show a “+” button and the result value
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>
For detailed references please check the Laravel Livewire documentation.
Laravel with Livewire – Conclusion
In the Laravel tutorial we create a simple Counter component using Livewire with Laravel Framework and displayed it on a customisable view file using blade template engine. I hope you enjoyed this tutorial!
