Laravel Livewire is causing a trend among the Laravel developer community. What is causing its fame is the reason for building dynamic and responsive interfaces without having to leave the comforts of Laravel. You would not have to learn any other technology out of your way to build amazing interfaces.
Livewire enables you to create interfaces by similar concepts of React and Vue. React ad Vue are very powerful tools but they do add complexities and layers of data in the application.
Therefore, Livewire which has the same architecture built as Laravel makes the applications simpler.
Let us create a Livewire included application and see how it works.
In our Laravel application run the following command to install Livewire.
composer require livewire/livewire
after the installation is completed you can open the composer.jason file in the main directory to check for Livewire.
Table of Contents
Livewire components
You can create a Livewire component and render the output with the page, like Blade include. This can increase the reusability just like React and Vue but without any unnecessary integration, building, and compiling. We can create a Livewire component by simply running the following command.
php artisan make:livewire nameOfComponent This command will create directories in your application. Two folders will be added, you will find your component class in Http/Livewire.
And your view file in views/Livewire folder.
In your component class, you will find a similar structure like React if you are familiar with it. The component can be called multiple times anywhere in your application.
You can simply use @livewire() to include your component in your views.
After you have created your component you need to include the JavaScript styles and scripts in your page.
When you run your application through php artisan serve command, check thought to inspect element window, you will be able to see that the Livewire and the JS has been loaded successfully.
Wire event listener
Livewire provides wire:model that helps in creating responsive forms and UIs on variety of input elements. Through wire:model it has become very easy to handle event listening and trigger functions for appropriate results.
The following code shows an example of implementing wire:model event listeners.
Two buttons are used in which the wire:model “click” is nested with the element. Now once the user clicks on the (+) button, the wire:click will trigger the function defined in the component which will perform its task and return.
The increment will add to the count value and return to the view. The view will dynamically return the value.
Ajax request
Laravel Livewire uses Ajax requests to communicate instead of using websockets.
Let us see how livewire works!
Run the following command to list down the routes.
php artisan route:list 
note that the Livewire routes are defined. In your network tab of inspect element, you will notice the request sent was from the route defined. The livewire/message/{name} is the exact same route being hit to the server.
Go to the Network tab and see the requirements for the Livewire connections are the same for the request being responded.
Conclusion
Livewire may replace Vue JS as it works wonderfully on the AlpineJS framework and is built to provide APIs to add support in the third-party library integration. Livewire is gaining recognition and the contributions are building up further.
