Nuxt.jsでjsonファイルを読み込む

Nuxt.jsでjsonファイルを読み込む方法を試してみます。

設定方法

axiosを使用します。
プロジェクトディレクトリに移動後、下記コマンドでインストールします。

npm install @nuxtjs/axios

nuxt.config.jsに下記を追加します。

export default {
  modules: ['@nuxtjs/axios']
}

これで$axiosが使用できるようになりました。

サンプルコード

今回はローカルにjsonファイルを設置して試してみます。
static/data/ にarticle.jsonを設置します。

{
	"articles": [
		{
			"title": "タイトルA",
			"body": "Aの本文"
		}, {
			"title": "タイトルB",
			"body": "Bの本文"
		}
	]
}

pages/index.vueを下記のように設定します。

<template>
  <ul>
    <li v-for="article of articles">{{ article.title }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        articles: []
      }
    },
    async asyncData({ $axios }) {
      const res = await $axios.$get('/data/article.json');
      return {
        articles: res.articles
      }
    }
  }
</script>

これでjsonデータを取得してページ上に表示させることができました。

<ul>
  <li>タイトルA</li>
  <li>タイトルB</li>
</ul>