【Nuxt.js】Jsonファイルの内容を表示させる方法

今回は、jsonファイルの内容をブラウザに表示させる方法を書いていきます。

Contents

Nuxt.jsの初期画面

Nuxt.jsで新しいプロジェクトファイルを作成しました。

npx create-nuxt-app 任意のプロジェクト名

index.vue に色々と記述されていますが、ロゴとh1のみを残して、その他の記述を削除します。

ブラウザでは次のように表示されます。

次のコマンドでインストールします。

npm install -g json-server

次のコマンドで json-server がインストールされているか確認しましょう。
インストールされていれば、バージョンが表示されます。

json-server -v

db.jsonというファイルは、まだ作成してませんが、次のコマンドを実行します。

json-server –watch db.json

次のように表示されます。
メッセージの内容は、 db.jsonファイルは存在しなかったので、初期データを含んだ db.jsonファイルを作成しましたよ。という事です。

ブラウザに Resources のURLを入力して、db.jsonの中身を確認してみましょう。

http://localhost:3000/posts を開くと次のように表示されます。
自動で作成された初期データの内容です。

http://localhost:3000/comments を開くと次のように表示されます。

http://localhost:3000/profile を開くと次のように表示されます。

db.jsonの posts の内容をブラウザに表示させるプログラムを作成します。

プロジェクト作成時に、 axios を選択してあります。
axios がインストールされていない場合は、次のコマンドでインストールしてください。

npm install @nuxtjs/axios

index.vue の script で、 axios をインポートします。

<script>
import axios from 'axios'

export default に、mount を記述します。

その中の axios で http://localhost:3000/posts にアクセスしています。db.jsonファイルの posts 部分です。

catch で、error があった場合は、コンソール画面に、エラー内容を表示するように記述しています。

GoogleChrome のデベロッパーツールを開いて、db.json の内容を読み取れているか確認します。

読み取りに成功している事を確認できました。

それでは、この内容をブラウザに表示させましょう。

次のように記述します。

ブラウザに、db.json ファイルの posts の内容が表示されます。

title のみを表示させてみましょう。

{{ posts[0].title }} と書き換えます。

ブラウザに json-server と title部分のみを表示させることに成功しました。

今回は、Nuxt.js でaxiosを使用して、jsonファイルの内容をブラウザに表示させる方法を書きました。
最後までお読みいただきありがとうございました。