Name: Display a User Data Page Based on id in Vue.js and Nuxt
Uploaded: 2017-08-21T23:22:06-05:00
Description: 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.

Start a Nuxt Project with npx and the Vue.js CLI

Add a CSS Library from npm to Nuxt

Add JavaScript Libraries from npm to Nuxt

Create a Vuex Store for Global Data in Nuxt

Load Data into the Vuex Store in Nuxt

Access the Router Params to Load Page-Specific Data in Vue.js and Nuxt

Build Global Navigation with Layouts and nuxt-link in Nuxt

Create CSS Transition Effects in Vue.js and Nuxt

Style a List and List Items in Vue.js and Nuxt

Register Vue.js Filters as Plugins in Nuxt

Style Navigation Based on Route in Nuxt

Display Only Available Data in Vue.js and Nuxt

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

Build a Recursive Component for Nested Comments in Vue.js and Nuxt

Create a News App with Vue.js and Nuxt

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.

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

Share this video with your friends

Course

Create a News App with Vue.js and Nuxt