A Beginner Guide to Laravel Livewire & How it Works
All you need to know to begin your journey with Laravel livewire
Introduction
Sometimes building modern web apps is hard. Tools like VueJS, React or Angular are extremely powerful, but the complexity they add to a full-stack developer's workflow is insane. Between all these great technologies, there is a framework called Livewire.
In this article, we will take a closer look at livewire and how it works. Without any complications 😃
What is Laravel Livewire?
In the simplest way. Laravel Livewire it's a package made for Laravel framework to make the relation between the Frontend & the Backend easy, Even if you don't know anything about JavaScript!
Why Laravel Livewire?
From the Official Website
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.
Your First Component
If you decide to use Livewire you will use it as Components. It's like VueJS and other frontend frameworks. So, without farther say, let's jump-in into the code.
Installation steps
- Create new Laravel project (if you don't do it yet!)
- Install Livewire Package
- Include Livewire Directives
- Create a Component
- Include The Component
This is all the steps you need to do to begin working with Livewire
1. Create New Laravel Project
You need to create new Laravel project if you want to begin fresh
You can use
laravel new livewire-example
If you don't know how to install a new Laravel website yet, Check The official Documentation
2. Install Livewire Package
Open your Laravel Project path and type in the console/terminal the following
composer require livewire/livewire
3. Include Livewire Directives
Include the JavaScript (on every page that will be using Livewire).
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
4. Create a Component
Let's create a basic counter
component and understand how it works. First, you need to run the livewire artisan command:
php artisan make:livewire counter
Running this command will generate the following two files:
Component class called Counter.php
located in app/Http/Livewire/Counter.php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}
Component view called counter.blade.php
located in resources/views/livewire/counter.blade.php
<div>
...
</div>
Let's add some text to the view, so we can see something tangible in the browser.
Note:
Livewire components MUST have a single root element.
<div>
<h1> Hey! You are seeing the counter component!</h1>
</div>
5. Include The Component
The part of creation done! Let's move to the next step, which is including the component in the right page.
Think of Livewire components like Blade includes. You can insert
<livewire:some-component />
anywhere in a Blade view, and it will render.
<head>
...
@livewireStyles
</head>
<body>
<!-- This is our counter component -->
<livewire:counter />
...
@livewireScripts
</body>
</html>
View It in The Browser
Load the page you included Livewire on in the browser. You should see, "Hey! You are seeing the counter component!".
Let's Bring The Counter Component To Life!
We need to add functionality to the counter component.
In Counter
Class Component
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
In counter
View Component
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>
What we did here is the following:
The Component Class:
- Making
public property
calledcount
and set it to 0. - Adding method called
increment
to increment the count number.
The View component:
- Adding button & an
h1
to show the count. - Adding
wire:click
attribute to increment the count.
I don't understand what's going on exactly here!
That's totally understandable, think of this method like when you add some id
's to your button
in the frontend and trigger an event
such as click
to send an ajax
request to the server, and again fetch
the response and show it to the view. Hard I know!
Livewire did all this automagically!
Now reload the page in the browser, you should see the counter component rendered. If you click the "+" button, the page should automatically update without a page reload. Magic 🪄.️
Conclusion
Today we learned about Laravel Livewire, How it works and how to create a new component.
If you have any question, let me know in the comments sections, and I'm happy to answer them!
If you liked this kind of articles, you can see more here.
I hope you learned something new.
Happy Coding 👋