【microCMS】 Nuxt.jsとの連携〜表示

はじめに

こんにちは！
今回はmicroCMSをNuxt.jsと連携させ利用出来る状態にするとことまでをアウトプットしていきます！

前提

・Nuxtで開発するためにNodeとnpmが必要になります。事前にご自身の開発環境にインストールしてください。
・microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。こちらを参照してください。

対象

・Nuxt.js上でmicroCMSを利用したい方

実装

①microCMSの準備

まずはmicroCMSで単純なAPIを作成します。
APIの作成の詳細手順については下記リンクのAPIの作成をご参照ください。

②nuxt-microcms-moduleのインストール

①microCMSの準備が終わったら公式で提供しているnuxt-microcms-moduleをインストールします。

terminal

$ npm install --save nuxt-microcms-module

package.jsonに以下が追加されているかを確認してください。

package.json

  "dependencies": {
    "nuxt-microcms-module": "^2.0.0"
  },

次にnuxt.config.jsに下記のように記述します。
・serviceDomainはmicroCMSのサービスID（サブドメイン部分）を入力。
・apiKeyにはサービス固有のAPIキーを入力。
・今回はSPA実装で行うので、mode: allと記述。ただし、SSR実装の場合は、本番環境でサーバーサイドのみの読み込みを行うため、process.env.NODE_ENV === 'production' ? 'server' : 'all'を指定する。modeのデフォルト値はall。

nuxt.config.js

  buildModules: [
    "nuxt-microcms-module"
  ],
  microcms: {
    options: {
      serviceDomain: "xxxxxxxxxx", //サービスID（サブドメイン部分）
      apiKey: "yyyy-yyyy-yyyy-yyyy", //サービス固有のAPIキー
    },
    //↓SSR処理をするならこっちにする必要がある
    //mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
    mode: 'all',
  },

下記事参考。

SPA実装に関して下記事を参照。

SSR/CSR処理の違いについて、下記事参照。

実装・出力

ここまでの設定が終わったら、設定したモジュールを呼び出すことができます。
下記のように記述で、データを呼び出すことが可能です。
templateの△△、××はmicroCMS側のAPI⏩APIスキーマで表示させたい項目のフィールドIDを記述することでAPIを取得し表示させることができます。

template

<template>
  <div>
    <pre>{{ 〇〇.△△ }}</pre>
　　　　　　　　<pre>{{ 〇〇.×× }}</pre>
  </div>
</template>

script

<script>
export default {
  async asyncData({ $microcms }) {
    const 〇〇 = await $microcms.get({
      endpoint: 'あなたのAPIエンドポイント',
    });
    return { 〇〇 };
  }
}
</script>

最後に

今回はmicroCMSとNuxt.jsとの連携〜表示までの実装法をまとめました。

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！