So, during this recording, Livewire 3 has been released, and so far we've been using Livewire version 2, so I thought it would be cool to upgrade our project to Livewire 3 and take a look at how we can use some of these new awesome features. So, let's head over to PHPStorm, let's go to our composer.json and let's update Livewire from version 2 to 3. Next, we'll run composer update. Next, we can use the upgrade command to automate the upgrading process from version 2 to version 3. So, let's run php artisan livewire-upgrade, and as you can see, as the command tells us,

from version 2 to version 3. So, let's run php artisan livewire:upgrade, and as you can see, as the command tells us, this will help us to automate most of the changes. It will make these changes in place, so whenever you run this command, make sure that you create a backup. So, we'll click enter to continue. So, first, I want to change this, that Livewire 3 now has its own namespace within the app directory instead of living inside the HTTP namespace. So, let's migrate. So, as you can see, it has migrated all of our components. When we're in full-page components, it's now using a different layouts/app.blade.php. Let's migrate as well, and now we can

of our components. When we're in full-page components, it's now using a different layouts/app.blade.php. Let's migrate as well, and now we can simply press enter to go through all these different changes, and we're not using all of them, so you probably see that, in some cases, it will return a table with all the occurrences and all the changes that have been made to these files, and in other cases, it will notify you that no occurrences were found. So, I recommend to go through each of these changes and to learn about what has changed between version 2 and version 3. I won't explain them in this video, as

these changes and to learn about what has changed between version 2 and version 3. I won't explain them in this video, as this command will guide you through each and every one of them, and you can also take a look at the Livewire documentation, where there's an extensive list of all the changes that have been made between the two versions. Okay, we're all set. The upgrade process has been completed, but as you notice, it's stated that we do have to make a change to our JavaScript file in case we're using Alpine. Alpine is now included with Livewire itself, so we need to make sure that we don't

Alpine. Alpine is now included with Livewire itself, so we need to make sure that we don't include Alpine twice, so let's remove it from our Apto.js. Now let's take a look, and when we refresh the page, it's now saying that it is unable to find the component with the ComponentsLayout app. So this has to do with the following. We need to make sure that these are moved over to the Components directory, so we have Components, Layouts, Apto.js. So let's move this inside the Components directory. There we go, and that all seems to work. Now you can see that this didn't work,

directory. There we go, and that all seems to work. Now you can see that this didn't work, it's firing off this banner request, so we need to make sure that we upgrade JetStream as well, because it is still using an old function that was available in Livewire 2. So let's switch back to our editor, let's open our composer.json, and let's make sure that we load JetStream version 0. Again, we'll run composer update. Let's switch back, click Add to Part, and now you can see that this is working again. Our card got updated, so this is all still working.

Let's switch back, click Add to Part, and now you can see that this is working again. Our card got updated, so this is all still working. So that was a pretty seamless upgrade. So now let's use one of these new promising Livewire version 3 features, and one is called FireNavigate, and right now, when we switch to a new product, you can see a spinner on the top left corner. It's refreshing our entire browser every time we navigate between pages. This is really cool, because now if we head back to our editor, and let's open up our storefront, and we'll simply add FireNavigate to our anchor tag, and now when we click this product, you'll notice that

we'll simply add FireNavigate to our anchor tag, and now when we click this product, you'll notice that it is not going to reload the entire browser, and it felt much quicker. You notice a difference? Let's take one more look. So we go to our home page, let's remove FireNavigate, click it, one, two, so roughly one and a half, two seconds, and now when we add FireNavigate again, it feels almost instant. Notice that we'll get a little loading indicator as well on the top part. When we click the links in our navigation, however, you can see that we're still

little loading indicator as well on the top part. When we click the links in our navigation, however, you can see that we're still not always using the FireNavigate features, so if we head back to our editor and go to the navigation menu, we can simply add FireNavigate to all of our links. Open up our navigation card as well, and add the FireNavigate tag here. Now we should get the same experience across the board, so when we switch our products over to our cart, you'll notice a significant difference when it comes to loading speeds and switching to certain pages. We need to make sure

significant difference when it comes to loading speeds and switching to certain pages. We need to make sure when we switch to the User profile, we'll need to update our layout here, so let's head over to our app layout, and do the same for our guest layout, and that should solve it. Perfect, nice, so we're now using Livewire version 3. So if we head over to our components, one easy change that is more readable is the getCartProperty. So now we have to use this certain syntax, like getCartProperty, and Livewire detects this.

properties. So now we have to use this certain syntax, like GetCartProperty, and Livewire detects this specific syntax, but in version 3, we can make it a bit more readable. We can simply change this to cart, and add a computer attribute here. We can do the same, and let's take a look. If we head over to our cart, everything should still work. Perfect, now we can do the same for our checkout status, as well for my orders, our navigation cards, our products,

our navigation cards, our products, our storefront, and finally, a few orders. So if we now browse around, everything still works. It looks a bit more cleaner, so we don't have to adhere to this special syntax, we can just add a few more things. We can just use attributes to declare that this is a computed property. So other common webshop features are being able to search, or having pagination, and Livewire makes this a breeze.

So other common webshop features are being able to search, or having pagination, and Livewire makes this a breeze. So let's take a look, for example, how we can add pagination within just a few minutes. Let's head over to PHPStorm, and let's open up our storefront component, and the first thing we're going to make is a paginated collection, so we're going to change get into paginate, and given we only have five products, I'm going to set the paginate number to 1 in this case, so we only get one product per page. You can see that we currently get an error, and this is because

paginate number to one in this case, so we only get one product per page. You can see that we currently get an error, and this is because we need to make sure that it includes the necessary trade, so Livewire understands what to do. So we can say with pagination, to include the trade, and now we switch back, you can see that we only have one product, but we don't have any links yet to go to the next page. So if we go to our storefront.blade.php file here at the bottom, we can add a new div, and we can say this product's links. Now, a Livewire component can only have one root element, so we need to make sure

and we can say this product's links. Now, a Livewire component can only have one root element, so we need to make sure that we wrap this entire file inside a new div, so this is our root element. So now if we switch back, we get a nice pagination here at the bottom, saying we're showing one of the four results, and as you can see, when we click one of the alternative pages, we move over to showing different results, and again, without any page reloads, so you can see that it's not refreshing the page at all. It was that easy. So let's add a little bit of margin to our links, maybe do like six.

page at all. It was that easy. So let's add a little bit of margin to our links, maybe do like six. That's a bit better. So before we move on, let's reset our pagination back to 5, and now the pagination will disappear because we only have 5 products, of course, but it's working. Now we can take a look at adding a search field, maybe here in the top right. So if we open up our storefront, we can add a flexbox, and let's add a heading saying our products, and next we'll add a search field, and of course also set

and let's add a heading saying our products, and next we'll add a search field, and of course also set the flexbox to justify-between, so our title is aligned to the left and the search field is aligned to the right, and the space in between is filled up. Next, let's add a placeholder to our search field, enter keywords. Now we're going to wire:model to a property called query. Let's take a quick look. That's fine. Let's make sure that we add some top margin here as well. I think on the other page we did 12 or something, yeah. Okay, so that's okay. Maybe do this one a little bit bigger, so let's say xl,

I think on the other page we did 12 or something, yeah. Okay, so that's okay. Maybe do this one a little bit bigger, so let's say xl, and this input field doesn't look that great, but we have a component that we can use, because if we head down to our components directory, we have a input field here. So let's use this instead. So let's reference x-input, and let's simply copy and paste this over. So yeah, that looks much better. And it seems something's up with our html. As you can see, it doesn't matter where we point our mouse,

And it seems something's up with our html. As you can see, it doesn't matter where we point our mouse, it's always trying to go to our fourth product, and this probably has to do when we remove the div and replace it with our panel. It no longer has the relative class, so let's make sure that we add this back on. So now it's correctly linking to all the different products, and we can enter the search field. Okay, so that all works. So by default, in Livewire, three input fields are now deferred, but in our example, we want to

Okay, so that all works. So by default, in Livewire, three input fields are now deferred, but in our example, we want to update this whenever we're typing. So to instruct Livewire to query results while we're typing, we have to add wire:model.defer. So if we open up our network tab and start typing, you can see that it is going to do all these requests. Now this might be a bit much, so we'd rather send a request when the user slows down typing. So we can use a mechanism called debounce. So if we add debounce here,

debounce. So if we add debounce here, and check again, you can see that it does a new request whenever we stop typing and not while typing. So this will lower the amount of requests being done by Livewire. Okay, so now that we have the keywords here, we need to make sure that our products are actually being filtered. So if we head back to our editor and go to our StorefrontComponent, we can simply call a win method on our query,

So if we head back to our editor and go to our storefront component, we can simply call a win method on our query, and we can simply say when we have a query, and this is going to be our... this might be a bit confusing. So maybe query isn't the best word to use because we have query here, we have query here, when query... So let's switch back. Let's change this to keywords. Let's rename our property. So whenever we got keywords, we want to adjust our query. We're going to say where, name, like, and here we're going to reference

So whenever we got keywords, we want to adjust our query. We're going to say where, name, like, and here we're going to reference our keywords property. I think that should do the trick. Let's switch back, and there we go. We can now filter our products. So now a User might want to share or save this URL or maybe share it with someone else, and now when someone searched for a t-shirt and said, like, okay, I'm going to share this with a friend of mine, he or she may copy this URL, and his or her friend opens this URL, and he gets all these different products.

he or she may copy this URL, and his or her friend opens this URL, and he gets all these different products. So we want to ensure that a query parameter is added whenever we are searching for keywords. So if we head back to our storefront component, we can add a attribute here, and this is the URL attribute. So now if we switch back and we start typing, you can see that Livewire is now appending the keywords to our URL, and now when we would share this URL with a friend and he or she would open it, you can see that now the keywords property is being supplied via the URL.

he or she would open it, you can see that now the keywords property is being supplied via the URL. So I think that's pretty cool, right? In just a few minutes we added pagination, we added keyword searching, and it feels and looks like a single page application, and we didn't write any JavaScript whatsoever.