This episode is for members only
Sign up to access "Getting Started with Nuxt 3" right now.
Get started
Already a member? Sign in to continue
Episodes
01. Introduction
46s
0%
02. Installing Nuxt
5m 40s
0%
03. Creating pages
4m 50s
0%
04. Linking to pages
4m 25s
0%
05. Pages with params
5m 59s
0%
06. Using layouts
4m 22s
0%
07. Components
4m 47s
0%
08. Simple CSS and Sass
3m 53s
0%
09. Fetching data
5m 58s
0%
10. Deferred fetching
5m 14s
0%
11. Picking data
4m 14s
0%
12. Fetching within components
1m 52s
0%
13. Client-side fetching
3m 15s
0%
14. Managing head data
3m 19s
0%
15. Dynamic head data
3m 11s
0%
16. Composables
5m 28s
0%
17. Public files
2m 16s
0%
18. Server API
6m 4s
0%
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.
18 episodes•1 hr 15 mins•2 years ago
Overview
Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.