Releases: microcmsio/nuxt-microcms-module
Releases · microcmsio/nuxt-microcms-module
v3.0.2
v3.0.1
v3.0.0
Supported Nuxt3 🎉
Nuxt3に対応しました!
Nuxt3からはフェッチの扱いがNuxt2から変更されており、このバージョンには破壊的変更が含まれます。
そのため引き続きNuxt2をお使いの方は npm install nuxt-microcms-module@2
でご使用ください。
Usage
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-microcms-module'],
microCMS: {
serviceDomain: 'YOUR_DOMAIN',
apiKey: 'YOUR_API_KEY',
},
});
<template>
<ul>
<li v-for="blog in blogs?.contents" :key="blog.id">
<NuxtLink :to="`/${blog.id}`">
<img
:src="blog.eyecatch.url"
:width="blog.eyecatch.width"
:height="blog.eyecatch.height"
alt=""
/>
<span>
{{ blog.title }}
</span>
</NuxtLink>
</li>
</ul>
</template>
<script setup lang="ts">
import type { MicroCMSImage } from 'microcms-js-sdk';
type Blog = {
title: string;
eyecatch: MicroCMSImage;
};
const { data: blogs } = await useMicroCMSGetList<Blog>({
endpoint: 'blogs',
queries: { fields: ['id', 'title', 'eyecatch'] },
});
</script>
Reference
type useMicroCMSGetList = <T>(
args: {
endpoint: string;
queries?: MicroCMSQueries;
},
fetchOptions?: FetchOptions
) => Promise<AsyncData<MicroCMSListResponse<T>>>;
type useMicroCMSGetListDetail = <T>(
args: {
endpoint: string;
contentId: string;
queries?: MicroCMSQueries;
},
fetchOptions?: FetchOptions
) => Promise<AsyncData<T & MicroCMSListContent>>;
type useMicroCMSGetObject = <T>(
args: {
endpoint: string;
queries?: MicroCMSQueries;
},
fetchOptions?: FetchOptions
) => Promise<AsyncData<T & MicroCMSObjectContent>>;
// FetchOptions is the same as the second argument option of useFetch provided by Nuxt3.
// AsyncData is the return value of useFetch.
// https://nuxt.com/docs/api/composables/use-fetch
What's Changed
Full Changelog: v2.0.1...v3.0.0
新形式APIキー(X-MICROCMS-API-KEY)対応
新形式APIキー(X-MICROCMS-API-KEY)対応
Features
新APIキーのリニューアルに伴い内部のリクエストをX-MICROCMS-API-KEY
に変更しました。旧APIキーに互換性があるので、既存のAPIに影響はありません。