nuxt.jsとtypescriptを使用して外部ＡＰＩを取得する。axiosのインストールでハマったので解決策を共有します。

nuxt.js でＡＰＩをガンガン取得して、かっこいいwebサイトを作るぜ！って意気込んだものの
axios のインストールで挫折。。。。。。
なんとか、インストールまでうまくいき

こんな感じ↓でデモページが作成できました！パチパチ(笑)

調べていると同じポイントでエラーが出ている記事が結構あって、
しかもどれもバラバラだったので、困っている方がおりましたら、参考にしていただければと思います。

さて、ここから本題。
今回は前提条件として、
エディターが、VS Code
node.js , yarn といったパッケージのダウンロードが既に済んでいることを前提にしております。

まず、nuxt.jsのプロジェクトをVS code のターミナルにて立ち上げます。
公式サイトをご参照ください。https://ja.nuxtjs.org/guide/installation/
ちなみに私は、フレームワークにVuetify、使用する言語がTypescript で、立ち上げ時のＷｅｂページはSPAを
選択しました。

ここで、localhostからブラウザを立ち上げると

こんな感じで立ち上がると思います。
おめでとうございます！

しかし、皆さんdeveloper tool のコンソールを確認してみてください。

なにやら、エラーが出ているではないですか！！
「最新版は、v-contentねえから、v-main使えって言われております」
なんとぶっきら棒な..........
仕方がないです。
ここは従いましょう。
でも、まだ何もファイルをいじっていないのに、どうすればいいのでしょうか？

実は私も検索をかけて分かったのですが、
layout/default.vueの中に

v-contetあるやん！！
実はここだけなんです。
なんと不親切な........
仕方ないので、直してあげましょう

これでエラーは出なくなりました。

さて、次にnuxt-property-decoratorをインストール。
非常に便利なライブラリなので、毎回コーディングの際に使用しています。
参考）https://github.com/nuxt-community/nuxt-property-decorator
公式のやり方で下記のコマンドを打ちます。
yarn add nuxt-property-decorator

はいこれで、インストール完了！

さて、最後に外部APIを取得するため
axiosを入れましょう。
yarn install -save @nuxt/axios やら
yarn add axios やら
nuxtconfig.jsのmodulesに@nuxt/axiosを書き込むやら、、、、、、

ハイ、私は全部だめでした。
どの方法でもインストールできたものの、
毎回ターミナル上に
"Cannot find modules 'vue'"の文字が！！
しかもnode_modulesのファイルがエラー出てるのです。
もう分けわからん、、、、、、
該当ファイルを探してみて
無理やりvueを入れてみても全くだめ

そんでようやく行き着いた正解コマンドがこれ↓
yarn add @nuxtjs/axios

おっおう、なんかみたことあるけど、どれも微妙に違った(´;ω;｀)
もうどうにもできなくなって、
公式ページhttps://axios.nuxtjs.org/#links
からaxios のショートビデオレッスンあるじゃん！
ここならなんかわかるかもって思って、クリックしたら
https://vueschool.io/lessons/the-axios-module?friend=nuxt
はいありました！
結局、たった20分くらいのビデオで4000円くらいとられるので、
ビデオを見てませんが、コマンドがわかって一安心。

と前回書きましたが、やっぱり駄目でした(´;ω;｀)
それで、よくよく考えてみたら、
yarn でnuxtを立ち上げたときに
そもそもaxios を設定していたので、
やってみたら、特にエラーがでることなく完了！

余計にyarn add axiosなんたらなんていりませんでした。

今回は、細かなコードの解説はしませんが、
下記のようにコードを書いて、axiosを使って無事にAPIを取得することに成功しました。

nuxt.js

<template>
  <v-app>
    <v-data-table dense :headers="headers" :items="items" class="elevation-1">
    </v-data-table>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import axios from "axios";

@Component({})
export default class AxiosPractice extends Vue {
  items: any[] = [];

  headers = [
    { text: "id", value: "postId" },
    { text: "name", value: "name" },
    { text: "email", value: "email" }
  ];
  async mounted() {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1/comments"
    );
    this.items = response.data.map((comment:any) => ({
      postId: comment.postId,
      email: comment.email,
      name: comment.name
    }));
  }
}
</script>

私は未経験からnuxtの案件にぶっこまれて、最初は全く訳が分からない状態で1か月を過ごしました。
今ようやく2か月目が経ち、なんとかなく理解してきた今日この頃です。
折角の連休ですが、これを期にnuxtマスターしてやろうって意気込んで、
自宅のパソコンに環境構築しようとしてドはまりするという(´;ω;｀)

解決するのに、半日かかりました(´;ω;｀)
幸先悪いわー
私のようなミスは起こさないで、充実したnuxtそしてaxiosライフをお送りくださいませ