Nuxt3でMicroCMSのデータを取得して表示させる

Nuxt3でMicroCMSのデータを取得し、Webページに表示させます。

まず/server/api/getMicrocms.jsに以下のコードを記述し、apiを作成します。

export default defineEventHandler(async () => {
  const url = '(MicroCMSのURL)';
  const data = await $fetch(url, {
    endpoint: 'profile',
    headers: {
      "X-MICROCMS-API-KEY": "(MicroCMSのAPIキー)",
    }
  });
  return data;
});

Nuxtではデータの取得にはFetch APIを使用する様です。(Axiosは使えないっぽい？)
https://nuxt.com/docs/getting-started/data-fetching
headersにMicroCMSのAPIキーを追加しておきます。

次にcomponent側で作成したapiを呼び出します。

<template>
  <section>
    <div v-if="data">
      <img :src="item.img.url" />
      <div v-html="item.content" />
    </div>
  </section>
</template>

<script setup>
const { data } = await useFetch('/api/getMicrocms')
const item = data._rawValue
</script>

component側で作成したapiを呼び出す時にはuseFetch()を使用します。

https://nuxt.com/docs/api/composables/use-fetch

以上で読み込み自体は完了です。

またWebサイトに表示させる際、yarn generateでgenerateすると、build時のみAPIを叩くことになるため、MicroCMSのAPI使用回数を最小限に抑えることができます。

MicroCMS / Nuxt最近触り始めたばかりですが手軽にサイト作れて便利だなと感じてます。