💡

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

2023/06/16に公開

Nuxt

microCMS + Nuxt.js + Firebase + Github Actions でサイト作ってみたい！と思いつき、その忘備がてら、そして学びを深めるためにテキストでまとめてみました。
この記事は、Nuxt.js アプリケーションの作成から、 microCMS コンテンツを表示させるまでの方法です。

環境

node v18.15.0
npm 9.5.0
Nuxt.js v2 / static spa
MicroCMS
Firebase Hosting
Github Actions

Nuxt.js プロジェクト準備

$ npm init nuxt-app

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in .
? Project name: here
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Template engine: Pug
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? XXX
? Version control system: Git

$ npm run dev

microCMS のコンテンツを表示

microCMSの記事を表示させるには、axiosを使う方法と　microCMSが公開しているNuxt.js用モジュールを使う方法があります。
今回は、microCMS が公開しているモジュールを使います。

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

下記コマンドで、npm からパッケージをインストールします。

$ npm install nuxt-microcms-module

注意
v3.0.0は、nuxt3でしか使えないみたいです。
nuxt2以下で使用する場合は、v2.0.0をインストールしましょう。

パッケージをインストールしたら、
nuxt.config.jsにて下記のように設定します。

nuxt.config.js

export default {
  // 略

  buildModules: ['nuxt-microcms-module'],
  microcms: {
    options: {
      serviceDomain: process.env.SERVICE_DOMAIN,
      apiKey: process.env.API_KEY,
    },
    mode: "all"
    // SSRの場合は以下
    // mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
  },
};

serviceDomain には、microCMS のサービスID（サブドメイン部分）、
apiKeyには、サービス固有のAPIキーを入力します。
これらは .envファイルにて環境変数で管理します。

.envファイルを作成し、以下のように記述します。

.env

API_KEY=xxxxxxxxxxxx
SERVICE_DOMAIN=xxxxxxxxxxxxx

注意
.envファイルでもキーは隠蔽できないなどの話も、ちらほら見ました。
ここはのちに詳しく調査しまとめたいとおもいます。

これで準備完了です。
早速 vue ファイルで表示してみます。

pages/index.vue

<template lang="pug">
  .top
    div(
      v-for="item in blogsList"
      :key="item.id"
    )
      p {{ item.publishedAt }}
      p {{ item.title }}
      div(v-html="item.content")
</template>

<script>
export default {
  name: "indexpage",
  data() {
    return {
      blogsList: '',
    }
  },
  async asyncData({ $microcms }) {
    const blogsData = await $microcms.get({
      endpoint: 'blogs',
      queries: {},
    })
    return {
      blogsList: blogsData.contents,
    }
  }
}
</script>

$microcms.get メソッドでREST APIがコールされ、microCMS側から記事データを取得できます。

簡単便利〜👀

日付をフォーマットする

$ npm install --dev @nuxtjs/date-fns

おまけ

サービスドメイン、変更も可能みたい。ありがたや。

環境

Nuxt.js プロジェクト準備

microCMS のコンテンツを表示

日付をフォーマットする

おまけ

Discussion