⚠️ This lesson is retired and might contain outdated information.

Display a User Data Page Based on id in Vue.js and Nuxt

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 4 months ago

Displaying data for a user who made a post or comment is a common scenario in app development. This lesson walks you through using user ids and setting up pages for the user to display the relevant information.

When I click on this user, I want to go to a user page, so let's go ahead and set that up, create a next link. Again, this is just item by. In my next link, I want to go to, and since I want to evaluate what's inside those quotes, I want to bind to it.

We'll navigate to /user/+item.buy. These are single quotes, because we're evaluating this whole thing into /user, and then that person's ID. Right now, you see these links. If I try and go there, nothing happens, but you see it formed the proper URL here.

We can set that page up if we go into our pages, create a new folder, call it user, and then here, create a new file. We'll call this ID.view. If I say template div, you've reached the user page.

At this link, you can see you've reached the user page. Any time I go to one of these users, it'll say you've reached the user page.

To load the user data, we'll set up the script and export a default object. I don't really need anything for the store, so I'll just use async data, meaning just load some data for this page. I'll import Axios from Axios so that I can load that.

I'll do this as async await. Then I just want to axiosGet. Let's just start with user/john.json. This will give us a response as usual, and then the user is response.data. We can just return an object where the user is response.data, which means that now we'll have a user available to us.

We can just say user.ID, and you can see that we get the ID of John. Or if I say user.created, pass it into my time since filter, you can see that John has been a user over 10 years. To get the proper user off of this, since the context is passed in, and the context has the route on it, I can just change the hard-coded John to route.params.ID.

This is because ID matches up with _ID here. This part of the URL automatically comes in as the ID. You can see that this guy has been on over a year. If I go back, click on this one, almost two years. This one, over four years.

I'll just add some basic styling to this, say padding all four. The code font has been a user. Then we have a nice, very simple user page that loads every time I click on one of these.

~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today