Few things you need to know about Laravel Livewire

WHAT IS LARAVEL LIVEWIRE?

Laravel Livewire is a framework built for Laravel to handle and build dynamic user interface. Livewire resembles to Frameworks like Vue and React a lot but the unique thing in Livewire is, that it is setup for Laravel and that means, you can use Laravel Livewire at the comfort of using Laravel. Laravel supports Vue and React as interface handlers but addition of Livewire will prove a lot beneficial as both Vue and React integrations in Laravel quickly gets hard to manage and maintain. 

HOW CAN I SETUP LIVEWIRE IN MY PROJECT ?

Not that hard. Navigate inside your Laravel Project using the command line with cd folder/Laravel_Project_name and then you need to bring in the livewire package using composer. For that, inside your command line, type composer require livewire/livewire 

Once that is done, you are ready to use Livewire inside your Laravel Project. 

For using the Livewire CSS and JS in your application, we need to include the Livewire components, navigate to the file or view you want Livewire components to be included in and add the following 

Remember, the above only works in Laravel version 7 or above. If you are using an older version of Laravel, you might want to use the below alternatives

with that taken care of, we can now create component and view for Livewire.

To create Livewire components, we can use the artisan command php artisan make:livewire [name], for example, lets make a simple review posting system where a user can just post a random review. To create the livewire components for that, we can use our command line and type php artisan make:livewire Reviews and with that done, Livewire will go ahead and create few new things inside your project. One will be the component class which can be found inside App/Http/Livewire/ folder. In our case, it will be App/Http/Livewire/Reviews.php and it's related view can be found inside resources/views/livewire/reviews.blade.php. Now we can go ahead and setup a few things. Inside your Review class, notice that Laravel included the related view already and every variable declared as public inside that particular class will be available in the view at any time. 

Add the below inside your Review Class

Here we created an array reviews which contains some hard coded review data.

After that we created a variable that currently holds nothing but you will soon come to know what that variable actually does. 

After that, there is a function called addReview() that basically works whenever a user clicks the button to add a new review.

Add the below code to your Review view file

The above is basically few basic styles and some laravel loops to print our data inside the array. The textarea bind to the newReview variable we created inside our class. To bind a variable to a field, we use wire:model. With that done, our newReview variable will be updated with whatever value our textarea contains.

The submit review button performs some action on click which is set using the click method at wire:click. Whenever the user clicks the button, the addReview() method inside the class gets called and that adds a new review to our reviews array.

Then below, we are just looping through the reviews array and are printing all the reviews inside it. 

Don't forget to include the Reviews view inside your main view. Check below for reference

<livewire:reviews> is where we bought the reviews view in. And with that done, we can now visit the index page of our application and can add a new review. The new review will be added without the page getting refreshed.

How cool is that? 

Below is an image of how the final form of this thing looks like 

If you have any query regarding this, you can comment down below and I'll try my best to resolve it for you. Try livewire now, its new and its awesome.