こちらのドキュメントでは、microCMSをNuxtで利用するための手順を示します。
初めてNuxtからmicroCMSをご利用される場合には、まずこちらの手順をお試しください。

事前に確認が必要なこと

• Nuxtで開発するためにNode.jsとnpmが必要になります。ご自身の開発環境にインストールしてください。
• microCMSのサービス作成が完了している必要があります。未実施の場合は、以下のドキュメントをご参照ください。

microCMSのセットアップ

まずはmicroCMSで簡単なAPIを作成します。

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

APIの作成画面で任意のAPI名とエンドポイントを入力します。



次にオブジェクト形式を選択します。


最後にフィールドを設定します。今回はテキストフィールドを一つのみ設定します。



上記設定でAPIを作成すると、コンテンツを入稿可能な状態となります。
編集画面に移り、任意の値を入力後、公開します。



この時点でAPIからコンテンツのデータを含むレスポンスが返却される状態となりました。
画面右上のAPIプレビューをクリックして、作成したAPIにアクセスし、JSONのレスポンスが返却されていることを確認しましょう。

Nuxtプロジェクトの準備

次にNuxtのプロジェクトを作成します。Nuxtが公式で公開しているCLIを使います。下記のコマンドを実行してみましょう。

$ npm create nuxt@latest nuxt-microcms

いくつかの選択肢が出てきますが、全てデフォルトの選択肢を選びましょう。



該当ディレクトリに移動して開発サーバーを起動します。

$ cd nuxt-microcms
$ npm run dev

http://localhost:3000 を開き、Nuxtの初期画面が表示されることを確認してください。

nuxt-microcms-moduleの初期化

公式で提供しているnuxt-microcms-moduleをインストールします。

$ npm install nuxt-microcms-module

nuxt.config.tsを下記のように編集します。service-domainにはサービスID（XXXX.microcms.ioのXXXXの部分）、api-keyにはAPIキーを入力してください。

export default defineNuxtConfig({
  // 略
  modules: ['nuxt-microcms-module'],
  microCMS: {
    serviceDomain: 'service-domain',
    apiKey: 'api-key',
  },
})

microCMSから情報を取得して表示

app/pages/index.vueを作成して以下のように編集します。

<template>
  <div class="container">
    <div v-if="data">
      <h1 class="title">
        {{ data.text }}
      </h1>
    </div>
  </div>
</template>

<script setup lang="ts">
    type Hello = {
        text: string;
    };
    const { data } = await useMicroCMSGetObject<Hello>({
      endpoint: "hello",
    });
</script>

今回はmicroCMSから取得したデータを、dataとしてテンプレート側に渡し、表示しています。
この状態でhttp://localhost:3000にアクセスしてみましょう。



上記のように表示されていたら、microCMSとのデータの繋ぎ込みに成功しています。
microCMSの入稿内容を変更して、画面表示される内容が変更されることも試してみましょう。