Hey there, my name is Caleb, I'm the creator of a tool called Laravel Livewire. It's a framework or package for Laravel that makes building Laravel apps extremely simple. So simple that people often refer to it as magical. And as much as I consider that a compliment, it's really helpful to understand what goes into that magic when you're using Livewire. So this series is all about that. It's not necessarily a, this is all the stuff that Livewire can do, it's much more a, hey, if you use Livewire, let me show you how Livewire works under the hood in a really deep way. We'll even build our own version of Livewire. This way, when you run across bugs and things like that in your apps, or you want to extend

We'll even build our own version of Livewire. This way, when you run across bugs and things like that in your apps, or you want to extend Livewire and make your own packages or tools, you'll have a bunch of skills to do that kind of thing. So before we dive into all the deep stuff, let's stay on the surface and create a little widget, a UI widget. It's going to be a counter where we're going to increment a little number and we're going to do it just in Livewire as if you were using Livewire for the first time so that we can talk about the Livewire experience from the most outside in perspective. So let's do it.

talk about the Livewire experience from the most outside in perspective. So let's do it. I have a totally fresh Laravel app here and let's go to the routes file. This is in resources. Nope, it's not. It's in routes/web.php. Okay. I have one route in here. It's the root endpoint and we're loading the welcome.blade.php view. So let's go to welcome.blade.php.

It's the root endpoint and we're loading the welcome blade view. So let's go to welcome blade. All right. So this is just basically nothing, an HTML file with some CSS and JavaScript that I pre-made for this little series and we're going to create just the scaffolding of the counter widget before we get into anything Livewire. So we'll make a div. We'll give it a class of counter. All right. Now inside that div, we'll have a span that's going to have the number that we're going

All right. Now inside that div, we'll have a span that's going to have the number that we're going to be incrementing and then we'll make a button with a plus sign to actually do the incrementing of that number. All right. So we'll put it up in the browser and there we go. Super duper simple. Now let's add Livewire again as if, you know, we were encountering Livewire for the first time and following the docs. First thing to do, we install Livewire, composer require livewire/livewire.

time and following the docs. First thing to do, we install Livewire, composer require Livewire. Okay. And when that's installed, we can add the Livewire scripts blade directive and this is going to include all the front end stuff that Livewire needs to make it all live. Okay. So Livewire is installed. We can now extract this into a Livewire component and we'll call our component Counter. All right. So let's do that.

All right. So let's do that. Let's create that component. php artisan make:livewire counter and this is going to be an inline component, which just means that instead of the class portion of the Livewire component and the Blade portion being two separate files, it's going to put it all into one file. You'll see what I mean in a second. php artisan make:livewire counter --inline. Would you like to star? Nope.

Would you like to star? Nope. I've already done that. Okay. So let's define that in our app. It's an app/Http/Livewire/Counter.php. So this is the Livewire component. It's a class right here and it has some stock HTML that we're going to replace with this counter boilerplate. Okay.

counter boilerplate. Okay. Format that a little bit. Great. Get rid of this white space. And there we go. We have Livewire installed. We have our counter extracted into a Livewire component, load it up and everything looks exactly the same. Great.

exactly the same. Great. Now let's actually make this thing live. So the first thing, this 0 is just static. It's just hard-coded right in there. Let's make this a public property on the class. We'll call it count and we'll set it to 0. And now instead of hard-coding this in, we'll echo out count with Blade. All properties on Livewire components are automatically made available to your Blade template right here.

All properties on Livewire components are automatically made available to your Blade template right here. Reload and we are still good. All right, here comes the live part. This plus sign, we're going to say wire:click, which means, hey, when this thing is clicked, call a method named, and we'll call it increment. Okay. And then we'll create a method here called increment. And inside of it, we'll just do kind of what's intuitive. We can just manipulate the state of this Livewire component.

And inside of it, we'll just do kind of what's intuitive. We can just manipulate the state of this Livewire component. We can just say, let's bump count by one and then Livewire is going to handle the rest. So let's see if it worked. We hit plus and there we go. Now it says one plus again, two, three, four, five. And that's the basic Livewire experience. If you've used it at all, this is not news to you, but take a second and think about what's going on here. It's faking this live experience.

And there's a lot that goes into creating or faking that Livewire experience and that's what we're going to talk about. So see you in the next video.