Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

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

    John LindquistJohn Lindquist

    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.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss