Skip to content

Releases: microcmsio/nuxt-microcms-module

v3.0.2

14 Jun 06:18
be829b4
Compare
Choose a tag to compare

What's Changed

  • 環境変数がクライアントサイドで読み込まれない問題を修正 by @dc7290 in #13
  • Version 3.0.2 by @dc7290 in #14

Full Changelog: v3.0.1...v3.0.2

v3.0.1

23 Mar 05:29
5d5de20
Compare
Choose a tag to compare

What's Changed

  • queriesにリアクティブな値が設定できない不具合を修正 by @dc7290 in #10
  • version3.0.1 by @dc7290 in #12

Full Changelog: v3.0.0...v3.0.1

v3.0.0

08 Mar 03:20
9b61ed2
Compare
Choose a tag to compare

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)対応

25 Oct 07:39
0145878
Compare
Choose a tag to compare

新形式APIキー(X-MICROCMS-API-KEY)対応

Features

新APIキーのリニューアルに伴い内部のリクエストをX-MICROCMS-API-KEYに変更しました。旧APIキーに互換性があるので、既存のAPIに影響はありません。