Getting Started
こちらのドキュメントでは、microCMSをNuxtで利用するための最短手順を示します。
初めてNuxtからmicroCMSをご利用される場合にはまずはこちらの手順をお試しください。
事前に確認が必要なこと
- microCMSのアカウント登録やサービス作成、API作成の仕方を理解している必要があります。操作マニュアルなどをご確認ください。
- Nuxtで開発するためにNodeとnpmが必要になります。ご自身の開発環境にインストールしてください。

- はじめに
- https://document.microcms.io/manual/getting-started
- GitHub - microcmsio/nuxt-microcms-module: microCMS integration for Nuxt.
- https://github.com/microcmsio/nuxt-microcms-module
microCMSのセットアップ
まずはmicroCMSで非常に単純なAPIを作成します。
- オブジェクト形式
- テキストフィールド1つ
設定例を以下に示していきます。APIの作成の詳細手順についてはAPIの作成もご参照ください。

- APIの作成
- https://document.microcms.io/manual/create-api
APIの作成画面で適当なAPI名とエンドポイントを入力します。
次にオブジェクト形式を選択します。
最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。
上記設定でAPIを作成すると非常にシンプルな入稿画面ができあがるため値を入稿して公開します。
以下のようなcurl
コマンドでJSONを取得できることも確認しておきましょう。(ターミナル等を開かなくても、上記画面内の「APIプレビュー」で即座に確認可能です)
$ curl "https://YOUR_SERVICE.microcms.io/api/v1/YOUR_ENDPOINT" -H "X-API-KEY: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
Nuxtプロジェクトの準備
次にNuxtのプロジェクトを作成します。Nuxtが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。
$ npx create-nuxt-app nuxt-microcms
Information
npx
コマンドはnpmのCLIパッケージを簡単に実行できるコマンドです。npm@5.2.0
から同梱されています。
インストールされたパッケージはコマンド実行後に削除されるので、グローバル汚染の心配もありません。
※ただし、マルウェアの実行には注意してください。
コマンド実行時には対話形式のプロンプトが表示されますが、ご自身の環境に合わせてご自由に入力ください。
※ create-nuxt-appのバージョンによっては質問項目が変わってきます
プロジェクト作成が完了後、開発サーバーを立ち上げてみましょう。dev
コマンドを使います。
$ cd nuxt-microcms
$ npm run dev
そして、localhost:3000
にアクセスします。作成に成功してる場合下記のような画面がブラウザにでます。
nuxt-microcms-moduleの初期化
公式で提供しているnuxt-microcms-module
をインストールします。
$ npm install nuxt-microcms-module
そして、nuxt.config.js
にて下記のように設定します。serviceDomain
にはmicroCMSのサービスID(サブドメイン部分)、apiKey
にはサービス固有のAPIキーを入力してください。
export default {
// 略
buildModules: ["nuxt-microcms-module"],
microcms: {
options: {
serviceDomain: "service-domain",
apiKey: "api-key",
},
mode: process.env.NODE_ENV === "production" ? "server" : "all",
},
};
microCMSから情報を取得して表示
次に先ほど作成したmicroCMSのAPIから情報を取得して画面に表示を行います。pages/index.vue
を編集してみましょう。
<template>
<div class="container">
<div>
<h1 class="title">
{{ text }}
</h1>
</div>
</div>
</template>
<script>
export default {
async asyncData({ $microcms }) {
const data = await $microcms.get({
endpoint: 'hello',
});
return data;
}
}
</script>
asyncData()
というメソッドはサーバーサイドでもクライアントサイドでも動作可能です。
ここでAPI通信を行うことで、ビルド時の処理やページ遷移時の処理を共通化することができます。
参考:https://ja.nuxtjs.org/guide/async-data/asyncData()
内でmicroCMSと通信を行い、その結果をテンプレート側に渡して表示しています。
この状態でlocalhost:3000
にアクセスしてみましょう。
microCMSの入稿内容を変更して画面表示される内容が変わることも合わせてご確認ください。