Nuxt.js axiosを使用してAPI接続しJSONデータを取得する

Nuxt.js axiosを使用してAPI接続しJSONデータを取得する

Nuxt.jsでaxiosを使ってAPIデータを取得する手順とサンプルコードです。デザイン部は vuetify を利用しています。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

Nuxt.jsはnuxt-community/starter-templateを利用してインストールしてます。

axiosインストール

axiosをローカルにインストールします

プロジェクト配下にあるnuxt.config.jsに下記を追加します。

これでnuxt.jsでaxiosが利用できます。

vuetifyインストール

UIコンポーネントフレームワークで vuetify もインストールしておきます。

axiosと同様に、プロジェクト配下にあるnuxt.config.jsを編集します。

外部IP接続設定

外部IPのブラウザより確認したいので、package.jsonに下記の記述を追加します。

下記のコマンドを実行してローカルサーバーを起動します。

サンプルコード作成

pages配下にあるindex.vueを下記のように編集します。

今回APIはこちらの無料のサイトから取得してます。

ブラウザから http://プライベートIP:3000にアクセスするとAPIより取得したデータが表示されます。

ソースコード説明

VeutifyのData tableで利用するデータ処理となります。

html

JS

偶数時は、IDのボタンの色を緑に奇数時は赤に変更し、取得したcompletedがtrueであれば完了という文言をfalseであれば、未完了を返します

html

js

axiosを利用してjsonplaceholderからAPIを取得してます。

asyncDataメソッドは、コンポーネントがローディングされる前に呼ばれます。

リンク先 ページ作成

リンク先のページを作成します。

pages配下にusersディレクトリを作成して、_id.vueという名前でファイルを作成し、下記のように編集します。

再度、ブラウザから http://プライベートIP:3000 にアクセスしてidをクリックすると

UserIDに紐付いたusernameとemailが表示されます。