Blog Detail
01
Jul
arrow_back Laravel Livewire - Building Dynamic Interfaces Easily
Laravel Livewire is a library that presents a simple way to build advanced, reactive, dynamic interfaces employing Laravel Blade as your templating language. It is a great stack to choose from if you want to construct a web application that is dynamic and reactive. But you don’t feel comfy jumping into a whole JavaScript framework like Vue.
You can practice Livewire to implement the various functionalities without the page reload like pagination, form validation, notifications, file uploads preview, etc. Furthermore, Livewire isn’t restricted to the above functionality. You can avail of it for so much more. The preceding features are just the most common ones you might like to carry out in your applications.
Install Livewire
composer require livewire/livewire
Include the JavaScript on every page which will be using Livewire.
<html>
<head>
... @livewireStyles
</head>
<body>
... @livewireScripts
</body>
</html>
Create a component
You’ve to run this command to create a new Livewire component named counter.
php artisan make:livewire counter
It will generate the following two files:
1: app/Http/Livewire/Counter.php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component {
public function render()
{
return view('livewire.counter');
}
}
2: resources/views/livewire/counter.blade.php
<div>
<h1>Hello World!</h1>
</div>
Include the component
You can easily include live wire components anywhere in a Blade view, and it will render.
Example:
<livewire:some-component />
<head>
...
@livewireStyles
...
</head>
<body>
<livewire:counter />
...
@livewireScripts
</body>
</html>
For viewing the file in which you added Livewire, you can load the page. Then you will see “Hello World!” in your browser.
Add “counter” Functionality
The next step is to replace the generated content of the counter component class and view.
View it in the browser
Now you’ve to reload the page in the browser. Then you will see that the counter component is executed. If you click the “+” button, the page will automatically update without a page reload. ️
Click this link to view its detailed documentation.
Published at : 01-07-2021
Rizwan Aslam
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.
Launch project