Let's move on to the final L in Tall Stack. Live wire. Live wire lets you build interactive and dynamic frontend, but writing your favorite PHP instead of JavaScript. Let's see how we did install the live via starter kit in our project. But to understand live via, let's start from a fresh lateral project, live via demo. This time I'm not gonna pick any starter kit, so select none.

This time I'm not gonna pick any starter kit, so select none. And once the project is created, I will CD into the project, open it up in Visual Studio Code. So here's a blank lateral project to get started with live via. We need to first install it, go to live via.lateral.com and click on start here. The prerequisites is that we need to have lateral version 10 or later and PHP version 8.1 or later.

The prerequisites is that we need to have lateral version 10 or later and PHP version 8.1 or later. This is for the live via version V three, which is currently the latest. So once we have these two, we do copy this command and paste it in the project, open the terminal and paste it. So now we have installed live via. Okay, let me just close this for now and open the welcome blade view. I'll remove everything from here

and open the welcome blade view. I'll remove everything from here and instead start with the blank HTML page. Just call it live via add a paragraph and say hello live via, let me give some padding of eight or something, sorry P eight. But for this to work we need our wheat directive and passin the CSS Path app css. And we also need to run NPM Run Dev.

app css. And we also need to run NPM Run Dev. Yes. Once we have this, let's open this up in the browser, open a new tab live via demo test. Now just like we did with Alpine, we can make any part of the page interactive or dynamic using live Via. For that, you need to first create a live via component. Go to the terminal again and switch to the other tab. Use the command PHP Artisan Make Live Via. That's how you create a new live via component

Use the command PHP Artisan Make Live Via. That's how you create a new live via component and you can call it anything uh, but lowercase as preferred. So I will say make live via demo. Once you do this, two files are created for you. One is the class app live via demo dot PHP, so it's located within the app folder, a new live via folder. And then the view is located within resources and views, but inside a new live via folder.

And then the view is located within resources and views, but inside a new live via folder. Let's open both of these and just notice that this is a regular PHP class. Just extending the live via component with a single render method, which is the view like we saw. It's within live via demo and there's nothing inside. So you can consider this very similar to controllers. Now instead of showing this paragraph directly, let's use the live via component that we created.

Now instead of showing this paragraph directly, let's use the live via component that we created. So cut this from here, put it in the view instead right here and include the component using live via colon demo. Okay, now if you refresh the page you'll see the exact same thing. Yes, this is pretty similar to blade components, but how do we make it interactive? So come back to the component

but how do we make it interactive? So come back to the component and add a variable public string. Let's call it greeting and say hello live via. Now this in live via is called a property to access this in the view, unlike controllers, you don't have to pass it like so. You don't have to say greeting equals greeting. All the public properties are automatically available within the view.

All the public properties are automatically available within the view. So you can simply replace this with dollar greeting and refresh the page. It is still here. Yes, we still haven't made it interactive. So now let's add a button button and let this button say say hello. And for it to really appear like a button, we need to add some classes. BG Blue 100 border Border blue

we need to add some classes. BG Blue 100 border Border blue 100 and or 200. And then just some padding PX four PY two. That should be okay. Yeah. Now this looks a little like a button. Now let's display this greeting. Hello, live video. Only on clicking of this button say hello. So initially let's start this greeting with a blank string. So now you have nothing and let's create a method.

So initially let's start this greeting with a blank string. So now you have nothing and let's create a method. Public function. Say hello. And here, let's say this greeting equals hello live via. So this is an action in live via which you can call from the view using wire click. So on click, remember X on click or at click in Alpine. That's how wire click works.

So on click, remember X on click or at click in Alpine. That's how wire click works. So you can call any action in the live via component using this. So simply say say hello. So once you click on this button, this greeting string is populated with hello live via and that should appear here. Let's refresh the page, click on this and yes, now this is beginning to get interactive.

Let's refresh the page, click on this and yes, now this is beginning to get interactive. We can do more of course. So let's add an input. Now input type equals text, text placeholder equals name. And once again this needs to have some classes, otherwise it won't look like an input. So oh, let's just give the same things. Border Border blue 100 BX four BY two, not blue.

Border Border blue 100 BX four BY two, not blue. Let me say Border Gray 100. Okay, now we have the input name and we have this button. So instead of saying hello live via, let's make it say hello, whatever name this is right for this, remember we were able to bind the input to the state in Alpine using X model. Very similarly, you could bind whatever is in this input with live Via property using via.

Very similarly, you could bind whatever is in this input with live Via property using via. So you could say something like Via model equals name. And here come and declare a public property called name. So now whatever is within this name will appear here. So if I say ti here, that will start appearing here. So this is two way. If I start entering something here, this name will have that value.

If I start entering something here, this name will have that value. So I'll start with blank. And here instead of saying hello live via, I will add the name where property here, this name. And now let's refresh the page. I will say Shati and click on the button, say hello. It says hello Shati, say hello. Lateral says hello lateral. So notice what you're doing. You are able to call PHP methods

So notice what you're doing. You are able to call PHP methods from Blade from the front end and you're able to update the view by calling PHP methods. I know this interaction as possible using Alpine as well, but let's talk about how how Livewire is different by using the same alpine example that we did in one of the episodes. So I will commend this out and I will paste that Alpine component here.

So I will commend this out and I will paste that Alpine component here. So this is what we had. We had an input field with it's empty. We show this, this is a required field alert, but once we start typing it, it's gone. So how we did that in Alpine was we had this name as a state and we were able to bind this to the input and check here if using pure JavaScript that if the length of that string is greater than zero, hide it,

and check here if using pure JavaScript that if the length of that string is greater than zero, hide it, that is we used tailwind classes, hidden else block. Now we'll change this to live wire. So first of all, I will remove X data here. We already have the public property name there. Yeah, we do have name and it's blank. And here, instead of X model, I will do via model name. And now as we change this name, we want something to happen, we want it to validate, correct.

And now as we change this name, we want something to happen, we want it to validate, correct. So let's come back here, comment this out, create another method, public function, updated name. So we can use these updated functions to check any time of this public property is updated or changed. So you could even say updated greeting or any other property name right here. So now I will say updated name.

or any other property name right here. So now I will say updated name. So this action will be called every time the property changes. And now what do I need to do? I need to validate this. So I will say, so I'll add another property called alert public string alert equals blank. It's blanks to begin with. So here we check if the name is empty. So we say if empty this name.

So here we check if the name is empty. So we say if empty this name. Then we show the alert or we say alert equals this is a required field. Of course it has to be this alert because it's a public property. Else else we say this alert equals blank. And going back to the blade view.

alert equals blank. And going back to the blade view. Um, here we don't use class names. I'll remove this. We will show this only if alert has some value. So here we'll use the blade directive if and say if not of empty alert, then only show this. So say and if. And here we'll show the alert instead. Okay? And this will not yet work because at the moment you start typing in Alpine,

Okay? And this will not yet work because at the moment you start typing in Alpine, when you have X model, it starts updating immediately. But in live wire, the default behavior is not live. That is only after clicking on a button or some other action, this takes place. But now that we add live, this should work. So to begin with, the alert is blank, right? So we've said alert is blank, that's why we don't see anything.

So we've said alert is blank, that's why we don't see anything. But the moment we start typing, again, we don't see anything. But if we erase it all, you'll see this is a required field, see nothing. And now the alert is there. So think about the number of other validations that you could do without writing a single line of JavaScript.

that you could do without writing a single line of JavaScript. We did all of this using PHP. So right here you can do whatever validations you want in PHP and you can even save the method here or update the name right here using models. So that's the power of Livewire. And with this basic understanding, let's go ahead and make our app interactive in the next episode.

and make our app interactive in the next episode.