トップ
チュートリアル
Nuxt

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を作成します。

オブジェクト形式
テキストフィールド１つ

設定例を以下に示していきます。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の入稿内容を変更して画面表示される内容が変わることも合わせてご確認ください。

チュートリアル