こんにちは、柴田です。
先日のPWA Night Conference 2021にて行われたmicroCMSワークショップでもお披露目したのですが、microCMSのNuxt.js用モジュールを公開しました。

https://github.com/microcmsio/nuxt-microcms-module

何ができる？

内部的にはNuxt.jsのModuleとPluginの機構を使っており、microCMSとの通信用クライアントをNuxt.jsのContextから利用できるようにするためのものです。
これによって、$microcms.get(...)という形で簡潔にmicroCMSとの通信を行うことができるようになります。

準備

まずはnpmからパッケージをインストールしてください。

$ npm install nuxt-microcms-module

次に、nuxt.config.jsにて下記のように設定します。

export default {
  // 略

  buildModules: ['nuxt-microcms-module'],
  microcms: {
    options: {
      serviceDomain: process.env.SERVICE_DOMAIN,
      apiKey: process.env.API_KEY,
    },
    mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
  },
};

serviceDomainにはmicroCMSのサービスID（サブドメイン部分）、apiKeyにはサービス固有のAPIキーを入力してください。
これらは.envファイルにて環境変数で管理することで、セキュアに扱うことが可能です。

// .env

API_KEY=xxxxxxxxxxxx
SERVICE_DOMAIN=xxxxxxxxxxxxx

mode はこのモジュールをクライアントサイドで読み込むのか（client）、サーバーサイドで読み込むのか（server）、両方で読み込むのか（all）を指定することができます。
デフォルトはallです。
Jamstack構成においては、APIコールは基本的には次のタイミングで行われます。

• 開発時はSSR＋CSRなので、ページロード時にはサーバーサイド、ページ遷移時にはクライアントサイド
• 本番時はビルド時のみとなるので、サーバーサイドのみ

よって、Jamstack構成の場合にはprocess.env.NODE_ENV === 'production' ? 'server' : 'all'と指定しておくと良いと思います。
環境変数を用いていれば、APIキーの隠蔽もこちらで完了します。
（以前、こちらの記事で説明した方法は不要になります。）

使い方

ここまでの設定により、Nuxt.jsのContextから$microcmsという通信用クライアントを利用できるようになります。
内部的にはmicrocms-js-sdkを利用しているため、詳しくはそちらのReadmeをご参照ください。

下記はNuxt.jsのpages配下での利用例です。

<template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
export default {
  async asyncData({ $microcms }) {
    const data = await $microcms.get({
      endpoint: 'your_endpoint',
      queries: { limit: 20, filters: 'createdAt[greater_than]2021' },
    });
    return data;
  }
}
</script>

おわりに

まだまだ最低限の機能しか備えておりませんが、Nuxt.jsでのmicroCMSのご利用がよりしやすくなったかと思います。
今後も追加開発してまいります。（globalDraftKey対応など）

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、お問い合わせからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！