feat(pages): Add Vuetify and asyncData examples

site/apis/users/_id.ts

@@ -1,13 +1,19 @@
 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)]
 }
 
 export interface Methods {
   get: {
-    response: Users
+    response: User
   }
 }
 

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,16 +43,22 @@
 <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()
   test!: {
     hoge: string
   }
 
+  users = [] as Users
+
   async mounted() {
     await this.$vxm.users.doAnotherAsyncStuff(4)
   }

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>