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

05. Pages with params

Transcript

00:00

Let's pretend that our to-dos index had a list of to-dos that had come from a request to an API. We are eventually going to be doing that. For now, though, what we're going to do is kind of fake linking through to a particular to-do by its ID. So we already saw from the last episode, this is going to look something like the following.

00:19

Of course, at the moment, we don't have a page registered for that. So let's go ahead and create out a page that's going to handle a parameter. Now, for this, you can call the parameter whatever you want. For example, if it's an ID, we're going to go ahead and use square brackets here.

00:34

And we're going to give the name of the parameter inside of the square brackets. And then we're going to prefix that with .view. So that's pretty much our ID page. Let's go ahead and create our template here and just say to-do ID.

00:48

Once again, we're just going to have to close this off and rerun npm run dev. So let's go over and give this a refresh. And sure enough, we now have a to-do ID page. The question is, how do we link through to this from the index?

01:01

And what is this called? Well, let's go ahead and create out a Nuxt link component again to link through to this. And let's just say to-do 1. So for the binding of this prop, what's the name going to be?

01:16

Well, it's just to-dos, which is the prefix based on the folder that we've created. Hyphen and then ID. And that's the name of the parameter. For example, if this was a slug or a UUID, you would just go ahead and name that

01:30

and reference it in here appropriately. For us, it's ID. Now, let's think about how we want to actually pass the ID through to here. Because it's an object, we're going to go ahead and say params.

01:42

And we're going to provide another object inside of here with the parameter name and the value. So the parameter name is ID because that's what we've called this. And then we're just going to go ahead and hard code in value 1 because, of course, we don't actually have an ID to work with.

01:58

Let's go over and check this out. So let's go to the to-dos homepage. You can see now we've got a link through to to-do 1. When I click through to this, sure enough, we end up on to-dos slash 1.

02:09

Let's just kind of prove that by going ahead and providing 5. Going back to here, clicking on it, and you can see that that changes. Now, you can pretty much name these however you want. For example, if you wanted to call this something different, you could go ahead and rename this.

02:23

Let's go ahead and rename this now really quickly to to-do hyphen ID, for example. So let's go back to the index page here. And let's hook this up to to-dos hyphen to-do hyphen ID. Not that you would probably do that.

02:38

But this is just to demonstrate it. Let's go back over. And if we come over to the homepage here or the to-dos page, and we click on this, sure enough, you can see that that is now included in the URL.

02:51

So you can pretty much just experiment with this, chop and change this up to get it how you want your structure to be. I'm going to go ahead and remove that prefix now and just change this back to to-dos slash or hyphen ID.

03:04

That's how we want it. Great. So we've now hooked this up. But the question is, how do we access this value inside of here?

03:12

Well, let's take a look at that over on the ID page and output this value here. OK, so there's two main ways to do this. The first is directly within a template like we are working in here. Or if you need access to that within script, there's another way to do that as well.

03:27

So let's define our script inside of here so we can demonstrate this in here. Let's start with our template. So to access anything within our route, we're going to use $route. Now, this will allow us to access a params object,

03:41

which will contain all of the parameters of our route that are getting passed down. You can see here that we're just dumping out an object with ID of 5. So we can technically go ahead and just access the ID in here. And sure enough, we see 5.

03:57

It's as simple as that to grab that out in our route. Now, our route object contains lots of information here. So we've got the full path, the path to this, any query. So any items in the query string.

04:09

For example, I could say page 1. And you can see that that gives us page 1 in here. The hash, the name, the parameters, which we've already seen, anything that's matched, and loads of other stuff as well, which we probably wouldn't use.

04:22

So that's pretty much our route object and how we would access that information. So let's say route params and ID and just keep that in there. OK, so how would we access this within our script? We're going to take a little bit more of a dive into this later when we actually hit an API.

04:40

But to do this, we're going to go ahead and define out our router to grab. And this is specifically when we're using view 3 with script setup. So we're going to assign route to use route, which is automatically registered for us. Let's just do a console log on this route object that we get back to see what we see.

05:00

So let's go ahead and open up our console. Give this a refresh. And sure enough, we see in here pretty much everything that we just saw when we dumped out that route within our template.

05:13

So from this, what we can do is just start to access the params. Let's go back and refresh this. And you can see, sure enough, we get an object with ID of 5. So we can access this in exactly the same way here and dump out the ID

05:26

or use it to make any further API requests. So again, that route object here, whether you use that in your template or within your script section, is pretty much everything you need. If you need to find something, just go ahead and dump out your route object

05:42

and see if there's something in there that you can use. We'll come back to this a little bit later when we actually make an API request. But for now, that is how we create route parameters or pages that handle route parameters and how we pick them up in our template and in our script section.

Episode summary

In this episode, we go hands-on with creating dynamic pages in our Nuxt app that can handle route parameters, like an ID for a to-do item. We start by pretending our to-dos are coming from an API (even though they're not just yet), and we want to be able to "link" to each to-do using its ID in the URL.

You'll see how to set up a new page that can handle a parameter by using square brackets in the filename (like [id].view) and how to properly link to this page using the NuxtLink component. We mess around a bit with how the route is named and structured, showing you that you can customize this as you wish, just to get a feel for how flexible it is.

Then, we dive into how to access those route parameters. We'll use $route in the template to grab the params (like the to-do's ID) and show what else is available in the route object, such as the path or any query string info. If you need to work with the param in script setup, we use the useRoute composable to get the same info and show how you could use it in your component logic or when fetching data from an API (which we'll be doing later for real!).

By the end, you should feel comfy setting up dynamic routes and accessing their parameters, both in your template and script, setting you up for fetching and displaying item-specific data soon.

Episode discussion

No comments, yet. Be the first!