Nuxtでデータフェッチする

Nuxtで自前でapiサーバー建てつつ、コンポーネントのasyncDataでデータをフェッチするっていうのがやりたかった。

はじめに、プロジェクトディレクトリ直下に、apiというディレクトリを用意して、json用のルーティングを用意する。

// project/api/index.js
const express = require('express'); // パッケージからのインポート
const app = express();

app.get("/json", (req, res) => {
  res.json({
    message: "Hello World!"
  })
})

module.exports = {
  path: '/api',
  handler: app
}

フェッチするコンポーネント。

<template>
  <p>message: {{ message }}</p>
</template>

<script>
export default {
  async asyncData ({ $axios }) {
    const data = await $axios.$get(`http://localhost:3000/api/json`)
    return data
  }
}
</script>

$getでURLにアクセスする。asyncDataでは、戻り値がthisに統合されるので注意する。

で、やっていけばいいかも。バックエンドの光が見えてきたかな？