Okay, let's make use of Livewire for our weather widget here. So I'm at the point where we're just using php and we can change the location, but that's going to refresh the page and scroll to the top. So let's go ahead and make use of Livewire. So note that I'm in a new branch here. So if you want to see the code, be sure to check out this branch. So let's first install Livewire. So let's composer require it. And while that's going, let's install the assets. So we can do Livewire styles and Livewire scripts, and we'll just put that in our welcome.

And while that's going, let's install the assets. So we can do Livewire styles and Livewire scripts, and we'll just put that in our welcome.blade.php since we're just making use of this page. But this should go in your layout. So I'm going to put it here. And let's put these scripts before the end of the body, or we'll put after this one. So put it here. Okay. And Livewire is done. So let's go ahead and make a new Livewire component.

And Livewire is done. So let's go ahead and make a new Livewire component. And we already have one called WeatherWidget. So we'll name it something else. So php artisan make:livewire weather-display instead of widget. Okay. Now, if you remember our PHP version, we are grabbing the information or the data from the API, and we're doing it in the routes here. So let's move this logic into the Livewire component. So let's go to WeatherDisplay, the class.

So let's move this logic into the Livewire component. So let's go to WeatherDisplay, the class. And before we move that logic, let's make some state here. And the way I like to think of Livewire components is sort of like view components. In view, you have this data object that holds your state, and that state is reactive. But in Livewire components, we can just put that state in public properties. And this will be available to our Livewire view. So if you remember the view version, we have currentWeather for state. We have futureWeather for state, and we have a location. So let's add those futureWeather and location.

We have future weather for state, and we have a location. So let's add those future weather and location. And Livewire components also have lifecycle hooks similar to view components. And I'm going to make one called mount, which is basically a constructor, or you can think of it as the mounted hook in view. So let's say mount. And I'm just going to initialize the weather here and set it to a default location. So this location equals, say, Toronto, Canada. And I'm also going to make a method called fetchWeather, which will grab the weather from the API, which is pretty much the same thing as what we have in our routes file.

And I'm also going to make a method called fetchWeather, which will grab the weather from the API, which is pretty much the same thing as what we have in our routes file. So say fetchWeather. And let's go back to our routes file and grab this information here. So from here, let's grab this. And we'll grab the response for the currentWeather and the response for the futureWeather. Let's paste that in. And let's assign our currentWeather instance variables, currentWeather and futureWeather. So we can do this currentWeather = response.json, just like we're doing here, right here. But everything is moved to the Livewire component now.

So we can do this currentWeather equals response.json, just like we're doing here, right here. But everything is moved to the Livewire component now. And same for futureWeather. So response.future is futureWeather. And now we can grab our markup from the weather widget blade component. And we can basically copy all of this and put it in our new Livewire WeatherDisplay component. So let's paste that in. And now in our welcome blade, instead of using the blade component, we can still use that if we want.

And now in our welcome.blade.php, instead of using the Blade component, we can still use that if we want. So I'm going to just comment it out. Now we can use our Livewire widget or our Livewire component. So we can say . Okay, and let's see if I did everything correctly and see if this still works. HTTP not found. Back to here. Let's import HTTP. Okay, anything else?

Let's import HTTP. Okay, anything else? And we have to change this to the instance variable. So say this location, and same for here. Okay. And there we go. Now we're making use of the Livewire component. And it looks like there's still stuff with the query string here, which I don't want to use for the Livewire component. So let's change that.

And let's remove this. Okay. And let's just go to the location without the query string. Okay. So we no longer need to pass in the information from the routes file. So let's get rid of that. So onto our routes file, we can get rid of all of this. And just return the view, because now all of this logic is now in the Livewire component. Here are this, and this should still work. Okay, so right now, this isn't much different from the Blade component, we've just moved

Here are this, and this should still work. Okay, so right now, this isn't much different from the Blade component, we've just moved the logic for grabbing the information from the API into the Livewire component. So now what we want to do is update this piece of state, so into our weather display. So we want to update the location as we type in here. So if we select a different city, we want to be able to pass this information into this Livewire component. Now if this were a standard form field, like an input text box or a button, we can make use of Livewire's directives, and we can easily update the state here. And once this state gets updated, the component will re-render.

use of Livewire's directives, and we can easily update the state here. And once this state gets updated, the component will re-render. But since we're using a third-party library that grabs locations and displays them here, we have to make use of something else. So we have to make use of events. So again, the idea here is to select a new city, and as we select it, we want to be able to update this location. And once this updates, the component will re-render. So let's take a look at events. Let's look for events here, there.

So let's take a look at events. Let's look for events here, there. And events can go both ways. So by both ways, I mean you can fire an event from the front-end and listen on the back-end, or you can fire an event from the back-end and listen on the front-end. So in our case, we want to listen, or fire an event from the front-end and then listen on the back-end. So let's look for that case, from global JavaScript. We can just do this. We can do window.livewire.emit, give it a name, and then we can even pass through parameters,

We can just do this. We can do window.livewire.emit, give it a name, and then we can even pass through parameters, which we'll do. So let's go to our front-end. And we want to do it on the change, so right here. So I'll put underneath this, window.livewire.emit, let's name it, locationChanged. And let's pass through the thing that we selected, so e.suggestion.value. And now to listen for this, let's take a look at the docs. We can do something like this. So we have to define this listeners array, and listen for that event that we named, or

We can do something like this. So we have to define this listeners array, and listen for that event that we named, or the event that we fired from the front-end, and then call a new method, which we can define. So let's grab this. Let's go into our class, so WeatherDisplay. Let's define the listeners right here, and paste that in. So we named it, locationChanged. And let's call a new method called, updateLocation. So let's make that method right here, say updateLocation. And that takes in a location, because we passed in an argument from the front-end.

So let's make that method right here, say updateLocation. And that takes in a location, because we passed in an argument from the front-end. And now, we can do this location, is the location that gets passed in. And let's also re-fetch the weather, because our location changed, and we want to get that new information for that new location. So let's see if this works. So I'm going to refresh, weather for Toronto, let's change it to Los Angeles. So that doesn't seem to work, let's refresh, and let's put a dd in the listener here. So let's see if this works.

I think that's because if we go into our weather display component, this is getting re-rendered. But this stuff right here depends on the JavaScript that we import. And when it gets re-rendered, it can't find it, because it's not within there, within this component, I mean. So I think if we move this outside of the Livewire component, so let's put it in welcome just above our Livewire component here, then this should work as expected. Let's try again. So we're in Toronto, Los Angeles, and there we go. And one more time, just to make sure it works. And it does update.

And one more time, just to make sure it works. And it does update. And as you see, it doesn't refresh the entire page and just updates the component here. So again, to review, when we change the location, we are sending an event to Livewire. And in our Livewire class, we are listening for that event here. And once we receive that event, we update the location, refetch the weather, and the component will re-render without refreshing the entire page. So as you see, most of this was done without any JavaScript, as opposed to the video we did in Vue where everything was done in JavaScript. So if you need any interactivity or DOM manipulation that doesn't require a round trip to the server,

did in Vue where everything was done in JavaScript. So if you need any interactivity or DOM manipulation that doesn't require a round trip to the server, using Livewire doesn't make sense because we don't need to hit the server. But Livewire pairs nicely with Alpine. So let's go ahead and make use of this for this toggle button here. So all I want to do is just toggle this, which you saw in the Vue video. So let's go ahead and install Alpine. So let's just put this in our head and go back to Welcome Blade, put it in the head up here somewhere. Let's put it here.

up here somewhere. Let's put it here. Actually, let's put it underneath the styles. And now we can make use of Alpine. So let's go back into our Livewire component and let's define some state in there. So weatherDisplay and let's put it right here, x-data. And we just need one piece of state to keep track if the futureWeather is open or not or toggled or not or visible or not. So let's say, isFutureWeatherVisible? Say true by default.

So let's say, isFutureWeatherVisible? Say true by default. And for the toggle button, we want to add an eventListener. So say click. And when we click, we just want to set isFutureWeatherVisible to the opposite, not isFuture. And now we just have to add an x-show directive on the thing we want to toggle. So in this case, it's the future weather. So we can say x-show equals isFutureWeatherVisible. And if I did all of this correctly, we should now be able to toggle the future weather.

So we can say xShow equals isFutureWeatherVisible. And if I did all of this correctly, we should now be able to toggle the future weather. So it's on by default, but we can toggle it on or off. So yeah, if you decide to take the Livewire approach, definitely pair it with Alpine as they are designed to work nicely with one another. So there you have it. We built this little weather app using both Vue and Livewire. Again, they both have their pros and cons. Now if you were to ask me which way I prefer, it sort of just depends on what you're doing. For this particular app, since it's mostly just an AJAX call that you have to make, I

Now if you were to ask me which way I prefer, it sort of just depends on what you're doing. For this particular app, since it's mostly just an AJAX call that you have to make, I would prefer Livewire. And if there wasn't too much interactivity, I would prefer Livewire with Alpine. You don't have to mess with any compiling of JavaScript, and mostly everything is done in PHP. However, if there was a lot of interaction, I would probably go for a Vue component. So I would definitely recommend learning both ways as they both have their pros and cons, and you can pick what you like to build your applications.