Alright, next up, I'd like to create a few different pages, and then learn how to seamlessly link between them. Let's do this. Back in my editor, I'll go to my routes file, and this data here, this was only an example. So let's get rid of all of it. And now let's create two new pages. So maybe if we visit /users, that will show a page to browse your users. And then if you visit /settings, that will load a settings page. Alright, now let's create those page components. So let's do this.

Alright, now let's create those page components. So let's do this. That was only an example. Bring it back. Okay. Let's duplicate this to save some time. So we'll have users, and then another one for settings. Great. So settings will say settings, and users will say users. Okay, so I have MixWatch running behind the scenes.

So settings will say settings, and users will say users. Okay, so I have MixWatch running behind the scenes. Why don't we see if this still works? Give it a refresh. There's home. Next we'll have users, and next we'll have settings. It works. Okay, now of course, we don't want to manually edit the URL. We want an anchor tag that links between them. Now we're going to talk about layout files a little bit later.

We want an anchor tag that links between them. Now we're going to talk about layout files a little bit later. So for now, we'll have to use a little bit of duplication, but that's okay. So in our homepage, let's do this. We'll say nav, and then we'll have an unordered list. We'll have three of them. I'm just doing a little shorthand here where each one contains an anchor tag that links somewhere. Okay, so this would be home, this would be users, and this would be settings. Okay.

Okay, so this would be home, this would be users, and this would be settings. Okay. Next, let's update the URIs, users, and settings. Okay, let's see if that works. So if I come back to my homepage, give it a refresh, yes, I see those links. And if I click on one, it sort of works, but what's going on here? I go to settings, and what I want to point your attention to is we're actually performing a full page refresh. So one more time, I want you to focus on this page load here. Ah, did you see it?

So one more time, I want you to focus on this page load here. Ah, did you see it? Why don't we make it a little more clear? In my routes file, why don't we sleep for a little bit? sleep for two seconds. Okay. So come back. Now if I click on the users page, one, two, we're performing a full page refresh, which defeats the entire purpose. That's not a single page application.

defeats the entire purpose. That's not a single page application. That's a traditional application that loads a view component. Now the solution is to not use a standard anchor tag where we don't have much control, but to instead replace it with a slight wrapper that Inertia provides, and it's called the link component. The link component is ultimately an anchor tag, but when you click on it, Inertia will intercept that and instead perform an AJAX request to the server. The server, due to that middleware we had installed, remember, in episode one, handle Inertia requests, that will understand that it needs to return a JSON response that contains

The server, due to that middleware we had installed, remember, in episode one, handle Inertia requests, that will understand that it needs to return a JSON response that contains all the information about the new page. Okay, so let's do that now. So I will import this Link component from Inertia Vue 3, and again, if you're using Vue 2 or React, then you would pull it in through that package. Next, standard Vue work here, we're registering it as a component, and now we can use it in our template. So right here, replace them with Link. Okay, so now if we give it another shot, now don't forget when I click on this users link,

So right here, replace them with link. Okay, so now if we give it another shot, now don't forget when I click on this users link, the server side is still delayed. It's sleeping for two seconds, and we're going to talk about how to deal with that in the next episode. But for now, the important thing is that I'm not performing a full page refresh. Maybe this will make it more clear. Let's open up the dev tools, and I'm going to listen for XHR requests. Okay, users one, two, and there's our response. Right here, and we get a JSON response that contains the new component we want to use.

Okay, users one, two, and there's our response. Right here, and we get a JSON response that contains the new component we want to use. So then Inertia will read this JSON response, and it will see, oh, you're trying to load the users component. Let me go ahead and swap that out, and then view will automatically re-render it. So in effect, if I go back to the inspector, everything up here, this will remain. It's not going to get reloaded, because again, we're not performing a full page refresh. One more time, when I click on say settings, the only thing that's being swapped out here is this page component here. And this is exactly how we can allow for a very responsive feeling website.

is this page component here. And this is exactly how we can allow for a very responsive feeling website. Okay, but of course right now, one of our issues is the navigation is only on the homepage. So like I said, we're eventually going to extract a layout file, but until we do that, let's take baby steps. Why don't we move this nav into a new component called Nav? So I'm going to add a directory called shared. Again, this is a standard Inertia convention. Any shared components that your whole website will reach for can go here. Okay, let's add one called Nav, and I'm going to paste that in.

Any shared components that your whole website will reach for can go here. Okay, let's add one called nav, and I'm going to paste that in. But now don't forget, this component doesn't know what link is. We would still have to import it again. So if you want, there are ways to automatically share a link across all of your page components. So if you don't want to re-import it every single time, that is an option if you want it. But for now, let's just pull it in like we did before. Inertia view three, we're at least building up the muscle memory, and then register it as a component. Great.

as a component. Great. So now we have a dedicated component for our navigation. We only need to swap this out now. So we're no longer currently using the Link component, though we might pull it in. Instead, I'm going to pull in Nav. And notice we're in the pages directory. So we go up into the shared folder into Nav, and then we will update that. Great. So now we'll say Nav and reformat.