Routing with NuxtPage

[00:00:00]
>> Okay, so we've done a lot with components we set up app, but you're probably thinking at this point, we need some routes. It's time [LAUGH] for some routes, there's a lot to manage with just app.view. And you're right, because I would say routing is one of the things that Nuxt does extremely well.

[00:00:15]
And so how do we turn on routing? Because like I said, if right now you built this and shipped it, view router will not be included, why? Because it's not needed, right? You don't want it to bundle that, but what we can do is we can create this folder called pages.

[00:00:30]
Sorry, pages in that not in the route, don't make my mistake. Pages is the game changer for everything. And what we're gonna do here is we're gonna create a page called index.vue. And so if you've been in the industry long enough, you'll know that whenever you visit a website, the route directory of whatever it is, is index.html.

[00:00:50]
That's actually the page that's being generated, it's just it's so common now that it's usually chopped off, and it's just assumed. Like the routing knows what to do, and so it's fewer characters for you to deal with. But, basically, this index.vue is the equivalent of our index.HTML page, that's the equivalent.

[00:01:07]
So I'm gonna go ahead and just write, Home Page, like this. Okay, so you're thinking like, okay, great, I have pages come in. And so once Nuxt detects that page is here, something's gonna have that reboot. It's gonna know, okay, time to bring in view router. This is great.

[00:01:28]
But something's funny, hmm, that's not my homepage. In fact, that's still app.view. And so what's important to understand here is that app.view still, as you would expect with these frameworks, this is still like the the king, the queen, rules over all the components first. This is where it first enters.

[00:01:50]
This is the entry point. And so because it's the entry point, I'm gonna go ahead and let's see, do we need to do anything with this right now after view? No, we're not going to. So what we're gonna do here is, I'm just gonna copy this cuz I think we're eventually just gonna move this to the homepage.

[00:02:03]
But there is a global component that we get with Nuxt, and suddenly I should leave that, let's leave those global imports. So there we go. That's called NuxtPage. And so, once you put this NuxtPage inside of your app.view, you'll notice, hey, Home Page shows up. And so the way to think of NuxtPage is, it's basically like a slot.

[00:02:28]
It's basically router view, for those who have used vue router or any other routing library to be honest. It's a wrapper on that with some ergonomics, but it basically says, okay, whatever the page is, just drop the content in here. So there's nothing stopping us from being, Generic Heading, right?

[00:02:46]
And so what this means is that going forward that generic heading will be sitting on top of all of our pages going forward. So we're gonna actually now create another page now because the beauty of Nuxt routing is that it brings file based routing to us in an easy way.

[00:03:03]
So if you've done any sort of manual routing configuration in the past, you'll know that every time you created a page, you have to go inside of your router. You to import the component, and then you have to find the route and the path, and then import the component and pass the component.

[00:03:15]
And you did that every single time. But we know how we want our routes to look, why can we just infer those things? So within pages, if we wanna create a display page, cuz that's what we had earlier, essentially, we were displaying data. We could just say well display.vue.

[00:03:31]
And so now I can basically paste this stuff in here. Let me just eliminate that stuff and then, yep, that looking pretty good. Except these imports. So this is another nice thing about imports, right? Every time you move stuff, you'd have to remap the path. And so I believe there is an alias, I believe this will work, this will take you all the way back to the route, so that no matter where you move you're still in that page.

[00:03:54]
So to prove that that works real quick, we're gonna go here, and then let me now, let me get to the location here. We can say /display and then there we go. We actually see our components, this is great. But once again for the sake of simplicity, we don't need this, so it's going bye bye.

[00:04:12]
Okay, so as we can see, what's nice about the page directory is that it correlates to whatever the slashes starting at page. And so what we're gonna wanna do now is, let's go ahead and just grab a navbar component from Bulma and provide some navigation for our app.

[00:04:28]
So the way that's gonna work is, we're gonna go into bulma.io. Let's go in the Docs, let's grab a Component, and let's grab that Navbar. Okay, it makes it really easy to just copy this whole thing. And all we're gonna do, is we're gonna create a component here called TheNavbar.

[00:04:47]
Now, this is another thing that I actually do with my component naming, is that I will actually prefix things where there should only be one of the thing on the page. And the power of this is that, cuz think about if, you're building an Ecommerce site and you have a shopping cart, but then you have five shopping carts across your page, that seems a little weird.

[00:05:08]
There's usually one shopping cart and that's for a reason, cuz that's what customers are looking for. So when you have the prefix on a component, it just kind of naturally signals to people that something's weird. Why is there the shopping cart five times? So there's just a little naming convention that I used that I thought I would share.

[00:05:24]
Okay, so obviously there is a lot going on here. So if we just save this real quick, and then what we're gonna do for now, let's go ahead and just import it directly on our app.view. So we're gonna say, TheNavbar, which you can see until actually, this is a cool part.

[00:05:39]
Remember when I told you about typing and automatically finding things. VS Code is automatically helping me find the component that I just created, even though I've never technically imported it before. And that's great, and that's one of the power of having libraries leveraged type script because we get some of the benefits of it without doing any additional work.

[00:05:57]
So now when I hit this and auto complete that, self close, we can see inside of our local hosts as we refresh, there we go. There's our Bulma header, pretty easy. So let's see, just to fix things up a little bit just to make things seem a little bit more in play, we're just gonna go ahead and lets just call this, we're gonna call it MyRecs.

[00:06:22]
Let's see if that worked out. There you go, MyRecs is there. And I'll explain why it's called MyRecs later. We're not gonna worry about, we're just gonna simplify the HTML a bit right now. I'm deleting some of the mobile stuff just to make things a little bit easier.

[00:06:32]
And then rather than have the navigation stuff be on the left hand side, I'm just gonna swap it over to be on Navbar end. So that's how this is currently being organized. Whoop, I deleted one too many. And so just by swapping that out, we'll see here that now everything's moved over.

[00:06:49]
This feels a little bit more like a standard navigation bar. So what I'm gonna wanna do now is we need to actually hook up our navigation to do something. So first thing first, we're gonna go ahead and we'll delete that one cuz, I'll show you why in a second.

[00:07:05]
So we have this home part, and so your first question is probably, well, how do we link to our routes, right? So there's nothing stopping you from just going href like this, this is standard, this works. But when you do that though, you're relying on it to basically externally refresh the page, and you'll get a brand new payload basically.

[00:07:25]
And so one of the advantages of using the frameworks, while some of it is, there are trade offs as always. You instead use the built in NuxtLink component, so think of this as router link is the equivalent. And so NuxtLink is like a wrapper on that, and then you can see, it's the two and then there we go.

[00:07:43]
And so now we'll go ahead and actually I'll do one more so that we can actually see this working. NuxtLink to /display, and then we will just call this Display, just like that. No wait, I need to close it. All right, now that we have that you'll see now that when I click this, wait, click Home, there you go, homepage, back display.

[00:08:07]
Everything works exactly as we expect. The main thing to keep in mind here is you might have noticed is that, I do as of now, I tried to keep all my components Pascal case when I'm using them in the template. Because it's another one of those signifiers that says, this is different than any HTML spec.

[00:08:27]
Or if you have web components, they might be actually load, there'll be a case and that kind of stuff. But this tells me very clearly this is coming from an external library, in this case it's coming from Nuxt.