Populate the User list view

This commit adds a component for an entry in a list of users, and uses
it in the user list view.

src/components/UserListItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="user">
+    <img :src="avatar" />
+    <div class="details">
+      <router-link :to="`/user/${user.id}`">
+        <h2>{{ user.full_name }}</h2>
+      </router-link>
+      <p class="metadata">{{ user.email }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import user from '@/api/user.js'
+
+export default {
+  name: 'UserListItem',
+  props: ['user'],
+  data () {
+    return {
+      avatar: ''
+    }
+  },
+  created () {
+    this.avatar = user.getAvatarUrl(this.user, 60)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user {
+  display: flex;
+  align-items: center;
+
+  padding: 20px;
+  border-top: solid 1px #ddd;
+
+  &:hover {
+    background-color: #fff;
+  }
+
+  img {
+    margin-right: 20px;
+    border-radius: 100%;
+  }
+
+  h2 {
+    margin: 0;
+    font-weight: 300;
+  }
+
+  .metadata {
+    margin: 0;
+    color: #777;
+  }
+}
+</style>

src/views/UserList.vue

@@ -1,5 +1,35 @@
 <template>
-  <div class="about">
+  <div class="user-list">
-    <h1>User list here</h1>
+    <h1>Users</h1>
+    <UserListItem v-for="user in users" :key="user.id" :user="user" />
   </div>
 </template>
+
+<script>
+import user from '@/api/user.js'
+
+import UserListItem from '@/components/UserListItem.vue'
+
+export default {
+  name: 'UserListView',
+  components: {
+    UserListItem
+  },
+  data () {
+    return {
+      users: []
+    }
+  },
+  created () {
+    this.getUsers()
+  },
+  methods: {
+    async getUsers () {
+      const params = {
+        limit: 10
+      }
+      this.users = await user.browse(params)
+    }
+  }
+}
+</script>