Nuxt + axiosで外部APIからデータを取得して表示する方法

各所で使う方法ですが、Nuxtにて外部APIを使ってデータ取得し、ページに表示させたいケースは多くあります。

Nuxtのライフサイクルのどこで取得し、ページに表示すべきか検討しました。

一般的な方法はこちらかなと思うので、とりあえず必要な時にはこちらを利用すると良いのでは無いでしょうか。

asyncDataでデータを取得する

asyncDataはサーバーサイドで1度実行されます。

ページ遷移時にクライアントサイドでも実行されますので、BFFなどでAPIを公開したく無い場合はご注意。

通常のページ遷移では実行されませんが、おそらくnuxt-linkなどで遷移すると実行されるのでは無いかと思います。（未確認）

コードはこちら。

// index.vue 

  async asyncData(context) {
    console.log('asyncData')
    return axios.get(`http://weather.livedoor.com/forecast/webservice/json/v1?city=400040`)
      .then((res) => {
        return { title: res.data.title }
      })
  }

asyncDataでaxiosを使ってAPIにアクセスしデータを取得します。

asyncDataはdataに格納されるので、下記のようにそのまま利用できます。

// index.vue
{{ title }}}