Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Already a member? Sign in to continue

Playing

04. Linking to pages

Transcript

00:00

Let's take a look at linking two pages. Of course, that's really important in any app. What we're going to do is create a navigation at the top of our home page, or in fact,

00:09

at the top of every single page. And we're going to be able to link through to the slash to-dos page that we've created. I'm going to go ahead and get rid of this create file

00:19

just here, just so we've got a to-dos index. And let's head over to app.view and create a navigation at the top of here. Now, we're going to look at components a little bit later.

00:28

So we'll make this a little bit tidier. But for now, let's just create a simple unordered list just to keep things really simple. And this will have a list item inside of it

00:37

with an anchor through to the create to-do page, or the to-do index page. Now, normally within an app, of course, what we would do is create an anchor.

00:46

And then we would link it through to the page that we wanted. Let's just see that now. So let's create to-dos.

00:52

And let's just say to-dos. Let's go back over. And of course, we can click through onto this to get to this page.

00:58

Let's go back over and try that from here. Now, technically, what has happened with that anchor is we're now refreshing the page. That's not what we want, because really, we

01:06

have a single-page application. Instead, what we do is use a Nuxt link component, which we can end here. And we have a very similar way of linking through.

01:16

Instead, what we do is we bind in a prop, which allows us to provide an object through to the location. Now, this is where root naming comes in, which we'll dive into a little bit deeper.

01:28

So let's just say that we wanted to find the name out as to-dos. This is what has been registered when we created this to-dos index page. This index file is now called to-dos.

01:38

We'll look at a more complex example in a minute. But just let's go over and see this in action first. So I'm over on the home page. I'm going to go ahead and click to-dos.

01:47

And without technically refreshing the entire page, this is now linked through to the right location. So we're pretty much on track to link things up. Let's go ahead and create another link or list item

01:58

just in here. And that's going to go through to the home page. Now, what would this be called? Well, it's just called index.

02:03

That's the index file that we created out in here. Let's go back over, give this a refresh, click on to-dos, click on home. And you can see that we can now navigate between each one.

02:13

So that's working nicely. Let's go back to our create example and just create out a create.view file inside of here. We'll go ahead and create a template out for this.

02:21

Again, to-dos create. And if we wanted to link from pretty much anywhere, so we could link from the to-dos page here over to the create page, let's try this out.

02:32

So we'll figure out the naming of this in a second. So let's say to, and let's provide in the name here. And that's going to be to-dos hyphen and create. So any route that we create that's kind of sub

02:45

with a different name other than index is going to have a hyphen in there. Now, when we look at parameters, these are slightly different.

02:54

So we'll look at the convention for that in a moment. But now that we're going into the create directory, we're just going to separate this with a hyphen. So if we come over to the homepage,

03:03

we can link through to to-dos. And if we just go and rerun npm run dev to bring that in and actually go and supply a create to-do label for this link, then when we click through to this,

03:17

you can see we're now through to the to-dos create page. So that's pretty much 90% of what you need to know to start linking through to other pages. There are a couple of shortcuts you can use for this.

03:29

So for example, with a Nuxt link, we could actually say to, and we wouldn't necessarily have to bind in an object here. We could say forward slash to-dos

03:40

forward slash create if you wanted to. Let's head over and see what happens. So let's go over to the to-dos page, hit create to-do.

03:48

And this technically, again, has not refreshed, but it's still linking us through to the right place. I much prefer using the name here explicitly. So that's what we're going to be using throughout the series,

03:59

but you can do either. Okay, we're going to go ahead and get rid of this example here because we've pretty much wrapped that up. And we're going to delete that create component.

04:06

So we're left with the two pages that we have here, to-dos and our homepage. And in the next episode, we're going to look at linking through to URLs

04:15

that have parameters. For example, if we wanted to view the first to-do by the index or ID one, let's see how we're going to do that.

Episode summary

In this episode, we dive into one of the core aspects of building web apps: linking between pages! We start by adding a basic navigation menu at the top of our app, making it easy to jump between the homepage and our new to-dos page. To keep things simple, we use an unordered list with links in it—nothing too fancy just yet!

You'll see the difference between traditional anchor <a> tags (which reload the page) and using the NuxtLink component, which handles navigation the right way in single-page apps by avoiding page reloads. We set up links using route names, which helps keep everything clean and maintainable—plus, we talk a bit about how Nuxt generates those route names automatically based on your file structure.

To cement what we've learned, we also add a 'create to-do' page, hook it into the navigation, and cover the naming pattern Nuxt uses for sub-pages (hint: it uses hyphens in route names when a file isn't called index). You’ll see how easy it is to link to deeper pages, and even look at a neat shortcut for linking by path.

Finally, we clean up the extra examples, review what we've built, and tease the next episode where we'll get into more dynamic routing—like linking to specific to-do items using URL parameters. By the end of this session, you'll feel confident setting up navigation in your Nuxt app!

Episode discussion

No comments, yet. Be the first!