Blog Detail

Jul

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.

Laravel Live Wire

Published at : 01-07-2021

AUTHOR

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.