All right, so at this point, if you're working along, you should have worked your way through some of the files and, you know, just lightly familiarized yourself with the general codebase. So now for this episode, I've identified a handful of things that I think might be a little confusing to you. So let's clear that up right now. First up, if we go into app.vue, you may notice this import at the top has a squiggly here, almost like my editor can't figure out how to find it. And second, what is this alias here? At symbol, components, hello world? Well, clearly we are pointing to this file here, but what is that at symbol?

At @ symbol, components, hello world. Well, clearly we are pointing to this file here, but what is that @ symbol? Okay, this is referred to as an alias. If we visit our vite.config.js file, you can see it's setting one up right here. So we're effectively creating an alias called @ symbol, and that will resolve to a file path to this source directory, which means effectively what we're doing here is instead of saying, all right, go into the current directory, but then into components and then hello world, and notice the squiggly goes away, instead we can use this alias here. And now, no matter how many nested directories we are in, we can always use this @ symbol to point to that source directory.

And now, no matter how many nested directories we are in, we can always use this @ symbol to point to that source directory. Okay, but yeah, you can see, at least in my editor, phpStorm, it's a little confused here. So to fix this, we need to give phpStorm a little more information. So unfortunately, this requires a bit of duplication. Create a file called jsconfig.json. And within here, create an object with a compilerOptions property. So within here, we will declare some paths. And specifically, I want to say, all right, look for that alias symbol followed by a star. That's a regular expression, meaning anything.

And specifically, I want to say, all right, look for that @ symbol followed by a *. That's a regular expression, meaning anything. And I want that to resolve to the source directory, like so. Yeah, so you can see I'm kind of duplicating what we have here. The problem is phpStorm doesn't know about Vite at the time of this recording, but it will know about this jsconfig.json file. So now yeah, we're just setting up an alias, anything at @ followed by characters, I actually want it to go to that source directory. So now if I go back to app.vue, there we go. You can see that squiggly goes away.

So now if I go back to app.vue, there we go. You can see that squiggly goes away. And now I can, for example, command click to instantly visit that file. All right, so that's item number one. The next thing is you're now familiar with these router links. And again, this is really important to understand. If I were to replace this with a basic anchor tag, like so, well, think about what would happen here. Let's give it a try in the browser. I will run npm run dev.

Let's give it a try in the browser. I will run npm run dev. And actually on that note, npm run dev, that is being declared in your package.json file. You can see there is an npm script called dev, and all that does is run Vite. Which means if you want, you could just as easily say npx Vite. Okay, so now we have a dev server at localhost:3000. All right, and here we go. Actually real quick, looks like we have a little typo. Let's go back into this, oh I'm sorry, roster.view, how did I do that? Okay, so anyways, yeah, notice if I click on the about page, it's instant.

Let's go back into this, oh I'm sorry, roster view, how did I do that? Okay, so anyways, yeah, notice if I click on the about page, it's instant. We're not performing a full page refresh. And you can see that. If I click on contact, yeah, you don't see that loading bar. However, because we switched the home link back to an anchor tag, well yes, it's going to work. But notice that it did perform a full page refresh. So whenever you want to link to a page and have it be dynamic and done through Ajax, you need to use a router link.

Okay, so clearly what we can see is this will display the corresponding view component for whatever component matches the current route. Say that three times fast. Really what's going on though is if we go into our router here, notice we have these routes set up and we say, well, if the URI is this, then this is the corresponding component we want to display. Or if the URI is this, then this is the corresponding component. So of course, if we go into app.vue, I can't just hard code something. I can't just say about view here. So if I were to import that fully and give this a refresh, yeah, that's going to work.

I can't just say about view here. So if I were to import that fully and give this a refresh, yeah, that's going to work. But now we're going to see about view for every single page. And of course, the point is we want this to be dynamic. And that's what router-view does. It will display the appropriate view component that corresponds to the current URI. And our router is telling us that, for example, this URI corresponds to home view. So if we click through there, sure enough, it's showing a welcome page. So if I were to change this and say, hello, I'm home and give this a save, sure enough, that updates on the fly.

And in fact, for the Laravel cast code base, as an example, this is exactly what I do. The only reason why we use dashes is because sometimes when we're referencing it globally or we're using templates, we still need to use a syntax that the browser can understand. However, in this case where we're compiling, there's no problem whatsoever. So we can stick to this syntax from now on. All right, next up. What about this word the in the name of the file? It's kind of weird. If we go everywhere else, hello world, welcome item, contact view, why does this one alone contain the word the?

There's no situation where we're going to have, for example, five different instances of this component. It's a one-time thing. So in those cases, yeah, you don't have to, but it's a common convention to proceed it with the word the. Okay, so let's open up this welcome section. And yeah, you can see it's divided into all of these welcome item. So here's one, here's another one, here's another one. And of course, that corresponds to each one of these as well. So this is a common thing, we even worked on this a few episodes ago, to reduce code.

And of course, that corresponds to each one of these as well. So this is a common thing, we even worked on this a few episodes ago, to reduce code and style duplication. Think about it. In this case, every one of these welcome item sections contains an icon, a heading, and then a description. So let's see what we have here. All right, a section to define the icon. And notice we have that #, and we learned about it a few episodes ago, so that should be pretty familiar.

But otherwise, if you just want everything contained in the same place, you could select everything and extract it manually. So there's nothing that says you have to create styles within a .ViewComponent. It's just an option if you want to. Next, notice in this particular file, there's no script section. So notice there's nothing like this, where we export an empty object. In the case of welcome items, there really is no special logic or behavior. So in those cases, we can omit the script section entirely. And yeah, I think you'll find that components like this can be incredibly useful. Okay, so now let's say, I don't know, let's pick one of these random ones for ecosystem.

And yeah, I think you'll find that components like this can be incredibly useful. Okay, so now let's say, I don't know, let's pick one of these random ones for ecosystem. So that corresponds to this. Right at the bottom, why don't we say, now visit the about page. And as you learned, we can't just use an anchor tag. So if I created an anchor tag to about, well, actually, of course, you can do that. Just remember, once again, that's going to perform a full page refresh. So even when you're outside of your main route section, if you ever want to link to a different page, I just want to make this crystal clear, and that's why I'm circling back. Make sure that you import routerLink from ViewRouter.