From fb755323088a3cf7d911bef0bbdb309924eb0bde Mon Sep 17 00:00:00 2001
From: Hideto Ando <39573967+hideto2112@users.noreply.github.com>
Date: Wed, 8 Jan 2020 09:45:49 +0900
Subject: [PATCH] feat(pages): Add Vuetify and asyncData examples

---
 site/apis/users/_id.ts | 10 ++++++++--
 site/pages/index.vue   | 26 ++++++++++++++++++++++++--
 site/pages/users.vue   | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 4 deletions(-)
 create mode 100644 site/pages/users.vue

diff --git a/site/apis/users/_id.ts b/site/apis/users/_id.ts
index 1fd9697..adaad26 100644
--- a/site/apis/users/_id.ts
+++ b/site/apis/users/_id.ts
@@ -1,5 +1,11 @@
 import { MockMethods } from 'axios-mock-server'
-import { users, Users } from './index'
+import { users } from './index'
+
+export interface User {
+  id: number
+  firstname: string
+  lastname: string
+}
 
 const methods: MockMethods = {
   get: ({ values }) => [200, users.find((user) => user.id === values.id)]
@@ -7,7 +13,7 @@ const methods: MockMethods = {
 
 export interface Methods {
   get: {
-    response: Users
+    response: User
   }
 }
 
diff --git a/site/pages/index.vue b/site/pages/index.vue
index e45c39c..d40309e 100644
--- a/site/pages/index.vue
+++ b/site/pages/index.vue
@@ -8,13 +8,29 @@
       <h2 class="subtitle">
         {{ $vxm.users.fullname }}'s swell Nuxt.js project
       </h2>
+      <div v-for="user in users" :key="user.id">
+        <v-btn
+          class="my-1 white--text"
+          color="blue"
+          :to="`/users?userId=${user.id}`"
+          nuxt
+          v-text="user.lastname"
+        >
+        </v-btn>
+      </div>
       <div class="links">
-        <a href="https://nuxtjs.org/" target="_blank" class="button--green">
+        <a
+          href="https://nuxtjs.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="button--green"
+        >
           Documentation
         </a>
         <a
           href="https://github.com/nuxt/nuxt.js"
           target="_blank"
+          rel="noopener noreferrer"
           class="button--grey"
         >
           GitHub
@@ -27,9 +43,13 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'nuxt-property-decorator'
 import Logo from '~/components/atoms/Logo.vue'
+import { Users } from '~/apis/users'
 
 @Component({
-  components: { Logo }
+  components: { Logo },
+  async asyncData() {
+    return { users: await $nuxt.$api.users.$get() }
+  }
 })
 export default class extends Vue {
   @Prop()
@@ -37,6 +57,8 @@ export default class extends Vue {
     hoge: string
   }
 
+  users = [] as Users
+
   async mounted() {
     await this.$vxm.users.doAnotherAsyncStuff(4)
   }
diff --git a/site/pages/users.vue b/site/pages/users.vue
new file mode 100644
index 0000000..6f1b5f7
--- /dev/null
+++ b/site/pages/users.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="container">
+    <v-card>
+      <v-card-text v-text="fullname" />
+      <v-card-actions>
+        <v-btn color="blue" to="/" nuxt outlined v-text="'back'" />
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { User } from '~/apis/users/_id'
+
+@Component({
+  async asyncData({ route }) {
+    const userId = +route.query.userId
+
+    return { user: await $nuxt.$api.users._id(userId).$get() }
+  }
+})
+export default class extends Vue {
+  user!: User
+
+  get fullname() {
+    return `${this.user.lastname} ${this.user.firstname}`
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+</style>