【Nuxt.js】Nuxt.jsでJSONファイル表示

JSONにミスがあると上手く表示されないため、
以下のような調節チェックツールでJSONファイルのチェックを行ってください。
https://tools.m-bsys.com/development_tooles/json-beautifier.php

axiosをインストールしてください。
axiosのインストールはこちら

ファイル構造

├── static
│　　　　　　└── data
│　　　　　　　　　　└── member.json （JSONファイル）
├── pages
│　　　　　　└── index.vue （表示させたいファイル）

member.json

{
  "members": [
    {
      "name": "佐藤さん",
      "hobby": [
        "釣り",
        "ゲーム",
        "アニメ"
      ]
    },
    {
      "name": "山田さん",
      "hobby": [
        "サッカー",
        "ドライブ"
      ]
    }
  ]
}

index.vue

<script>
export default {
  async asyncData({ $axios }) {
    const res = await $axios.$get('/data/member.json');
    return {
      members: res.members
    }
  }
}
</script>

あとは表示させたいところに表示させるだけです。
今回は配列も作成したため、配列の箇所はv-forを使用していきます。

index.vue

<section v-for="member in members" :key="member.id">
	<h2>{{ member.name }}</h2>
	<ul>
		<li v-for="hobby in member.hobby" :key="hobby.item">{{ hobby }}</li>
	</ul>
</section>