doorkeeper　apiからイベントを取得して表示

doorkeeper.vue

＊pagesディレクトリに設置
<template>
  <v-card class="mt-4 mb-4 pa-3">
    <v-layout row wrap>
      <v-flex xs4 v-for="(item,i) in data" :key="i">
        <v-card class="blue ma-2">
          <v-card-text><img :src="item.event.banner" width="100%"></v-card-text>
	        <v-card-text>{{item.event.title}}</v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-card>
</template>

<script>
  import axios from 'axios'
  export default {
    layout: 'event',
    asyncData ({params}, callback) {
      axios.get('https://api.doorkeeper.jp/events/')
        .then((res) => {
          var data = res.data;
          console.log(data);
          callback(null, {data: res.data})
        })
        .catch((e) => {
          callback({ statusCode: 404, message: 'ページが見つかりません' })
        })
    }
  }
</script>

event.vue

layoutsディレクトリに設置
<template>
  <v-app>
    <v-toolbar>
      <v-toolbar-title>Vuetifyテスト</v-toolbar-title>
    </v-toolbar>
    <nuxt />
    <v-footer :fixed="fixed" app>
      <span>&copy; ITkaasan</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Vuetify.js'
      }
    }
  }
</script>