Nuxt.jsでmicroCMSの記事を表示させる

目的

ヘッドレスCMSを使って記事を投稿する案件があったので、実際に使ってみました

動作環境

• node v16.15.1
• npm v8.11.0
• nuxt.js v2.15.8

1.はじめに

nuxt.jsの開発環境とmicroCMSの設定はすでにできていることを想定とします

1nuxt.jsでmicroCMSを使えるように設定する

microCMSの記事を表示させるにはaxiosを使う方法とmicroCMSのモジュールを使う方法があります。
今回は後者のmicroCMSを使った方法を使います

1.1 nuxt.jsにmicroCMSのモジュールをインストールする

npmからモジュールをインストールします

$ npm install nuxt-microcms-module

1.2nuxt.config.jpで設定をする

インストールが終わったらnuxt.config.jpにて設定をします

nuxt.config.jp

export default {
  buildModules: ['nuxt-microcms-module'],
  microcms: {
    options: {
      serviceDomain: process.env.SERVICE_DOMAIN,//サービスドメイン
      apiKey: process.env.API_KEY,//APIキー
    },
    mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
  },
};

上記のように設定する
今回はenvファイルを使って設定しているのでenvファイルに情報を記載する

.env

API_KEY=xxxxxxxxxxxx
SERVICE_DOMAIN=xxxxxxxxxxxxx

2 microCMSを使って表示させる

上記の設定でmicroCMSが使えるようになったので、実際に使ってみます

2.1 記事を表示させる

nuxt.jｓのpage/のなかで作業します

index.vue

<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>

こちらのコードで記事のタイトルを表示させることができたと思います

3 まとめ

axiosを使うよりもこちらのほうが簡単ではありますね
現在nuxt.js+microCMS+netlifyを使ったブログサイトを作成中です