【Nuxt.js】ヘッドレスCMS（microCMS）の導入について

はじめに

こんにちは。
こちらの記事では、Nuxt.jsでmicroCMSを導入する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

ヘッドレスCMSとは

ヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。ヘッドレスなので、ビューの無いCMSということになります。

参照：https://blog.microcms.io/what-is-headlesscms/

WordPressのような管理画面（ビュー）がなく、APIからデータを取得して描画させることができる。既存サイトを残したままブログ機能を追加したいときなどに使用できる。

実装手順

今回は日本製のmicroCMSを使って、APIからコンテンツのIDを取得する。

1. Nuxtの新規プロジェクトとmicroCMSのコンテンツ作成

Nuxtの新規プロジェクトを作成し、microCMSのアカウントを登録する。今回使用するAPIの基本情報を入力、APIの型選択、APIスキーマの定義まで行う。
microCMSの詳しい記事はこちら。

2. APIの取得

Nuxtの新規プロジェクトのpages配下にあるindex.vueを下記のように編集する。

script

<script>
import axios from "axios";

export default {
  async asyncData() {
    const {data} = await axios.get(
      'https://サービス名.microcms.io/api/v1/APIのエンドポイント',
      {
        headers: { "X-API-KEY": "APIキーを入力" }
      }
    )
    return data
  }
}
</script>

サービス名・APIのエンドポイント・X-API-KEYは、どちらもmicroCMSのAPIプレビューから確認できる。

template

<template>
  <div>
    {{ contents }}
  </div>
</template>

templateに、マスタッシュ構文でcontentsを表示させることで、登録した全てのデータを取得できる。

3. データ１件分のIDを取得

templateを以下のように書き換えることで、１件分のIDが画面に描画される。

template

<template>
  <div>
    {{ contents[0].id }}
  </div>
</template>

おわりに

ここまでmicroCMSの導入手順についてまとめました。
初めて導入する際はつまづく箇所も多いと思いますが、公式サイトの記事を参考にしてみてください！
以上、最後まで読んでいただきありがとうございました！