Next

Nuxt3で、microCMSを使って記事一覧を表示する手順についてご紹介します。

page/index.vue

取得部分は、公式ドキュメントにある通りに行っています。

<script setup lang="ts">
import { ref } from "vue";
const { data } = await useFetch("<END_POINT/>", {
  baseURL: "https://xxx.microcms.io/api/v1/",
  headers: {
    "X-MICROCMS-API-KEY": "<API_KEY/>",
  },
});
const item = data._rawValue.contents;

</script>

<template>
  <IndexMainSection :items="item" />
</template>

components/index/MainSection.vue

<script setup lang="ts">
type Props = {
  items: Array<string>;
};
const Props = withDefaults(defineProps<Props>(), {
  items: () => [],
});
</script>

<template>
  <div class="folio-index">
      <div v-for="(item, index) in items" :key="index">
        <img :src="item.img.url" alt="" />
      </div>
  </div>
</template>

setup記法により違いとTSの有無の差がある程度で、nuxt2でのmicrocms取得と大きな違いはない印象でした。