Vue.js 2 Design Patterns and Best Practices

Creating the UserList route

The first section of our application will be a home page that displays a list of users from an API. We've used this example in the past, so you should be familiar with the steps involved. Let's create a new component under src/components/user named UserList.vue.

The component will look something like this:

<template>  <ul>    <li v-for="user in users" :key="user.id">      {{user.name}}    </li>  </ul> </template><script>export default {  data() {    return {      users: [        {          id: 1,          name: 'Leanne Graham',        }      ],    };  },};</script>

Feel free to add your own test data at this point. We'll be requesting this data from the API momentarily.

As we've created our component, we can then add a route to user.routes.js, which displays this component ...