1- ⚠️ Nuxt3 is not supported. Please use Nuxt2.
2-
31# nuxt-microcms-module
4- [ microCMS] ( https://microcms.io ) integration for [ Nuxt] ( https://nuxtjs.org/ ) .
2+
3+ [ microCMS] ( https://microcms.io ) integration for [ Nuxt] ( https://nuxt.com/ ) .
4+
5+ Attention❗️
6+ This module is intended for Nuxt version 3. If you are using version 2, please perform ` npm install nuxt-microcms-module@2 ` and refer [ here] ( https://github.com/microcmsio/nuxt-microcms-module/tree/v2#readme ) .
57
68## Getting Started
79
@@ -13,63 +15,116 @@ $ npm install nuxt-microcms-module
1315
1416### Setup
1517
16- ``` javascript
17- // nuxt.config.js
18-
19- export default {
18+ ``` typescript
19+ // nuxt.config.ts
20+
21+ export default defineNuxtConfig ({
22+ modules: [
23+ [
24+ ' nuxt-microcms-module'
25+ {
26+ serviceDomain: ' YOUR_DOMAIN' // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
27+ apiKey: ' YOUR_API_KEY'
28+ // target: 'server',
29+ },
30+ ],
31+ ],
32+ // or
2033 modules: [' nuxt-microcms-module'
21- microcms: {
22- options: {
23- serviceDomain: " YOUR_DOMAIN" // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
24- apiKey: " YOUR_API_KEY"
25- },
26- mode: process .env .NODE_ENV === ' production' ? ' server' : ' all'
34+ microCMS: {
35+ serviceDomain: ' YOUR_DOMAIN'
36+ apiKey: ' YOUR_API_KEY'
37+ // target: 'server',
2738 },
28- };
39+ }) ;
2940```
3041
31- #### options.serviceDomain
42+ #### serviceDomain
43+
3244` String `
45+ Required.
3346Your service id, which is a subdomain of microCMS.
3447
35- #### options.apiKey
48+ #### apiKey
49+
3650` String `
51+ Required.
3752Your api-key.
38- It can be obtained from the service settings.
53+ It can be obtained from the service settings.
54+
55+ #### target
3956
40- #### mode
41- ` String ` (can be ` client ` or ` server ` or ` all ` )
42- If defined, this module will be included only on the respective (client or server) side.
57+ ` String ` (can be ` server ` or ` all ` )
58+ Default: ` server `
59+ By setting this value to ` all ` , the api-key you set will be included in the client-side code.
60+ This will allow the client side to send requests to microCMS.
61+ If you only want to send requests to microCMS at build time or from the server side, set this value to ` server ` or leave it blank.
4362
4463### Hot to use
45- This package uses [ microcms-js-sdk] ( https://github.com/microcmsio/microcms-js-sdk ) .
46- You can get microCMS client (` $microcms ` ) from ` context ` .
47- Please see the URL below for details.
48- https://github.com/microcmsio/microcms-js-sdk#how-to-use
4964
50- ``` vue
51- // pages/index.vue
65+ We provide several custom hooks that can be used globally.
66+ These are functions that internally wrap useFetch.
5267
68+ ``` typescript
69+ type useMicroCMSGetList = <T >(
70+ args : {
71+ endpoint: string ;
72+ queries? : MicroCMSQueries ;
73+ },
74+ fetchOptions ? : FetchOptions
75+ ) => Promise <AsyncData <MicroCMSListResponse <T >>>;
76+ type useMicroCMSGetListDetail = <T >(
77+ args : {
78+ endpoint: string ;
79+ contentId: string ;
80+ queries? : MicroCMSQueries ;
81+ },
82+ fetchOptions ? : FetchOptions
83+ ) => Promise <AsyncData <T & MicroCMSListContent >>;
84+ type useMicroCMSGetObject = <T >(
85+ args : {
86+ endpoint: string ;
87+ queries? : MicroCMSQueries ;
88+ },
89+ fetchOptions ? : FetchOptions
90+ ) => Promise <AsyncData <T & MicroCMSObjectContent >>;
91+
92+ // FetchOptions is the same as the second argument option of useFetch provided by Nuxt3.
93+ // AsyncData is the return value of useFetch.
94+ // https://nuxt.com/docs/api/composables/use-fetch
95+ ```
96+
97+ ``` vue
5398<template>
5499 <ul>
55- <li v-for="content in contents" :key="content.id">
56- <nuxt-link :to="`/${content.id}`">
57- {{ content.title }}
58- </nuxt-link>
100+ <li v-for="blog in blogs?.contents" :key="blog.id">
101+ <NuxtLink :to="`/${blog.id}`">
102+ <img
103+ :src="blog.eyecatch.url"
104+ :width="blog.eyecatch.width"
105+ :height="blog.eyecatch.height"
106+ alt=""
107+ />
108+ <span>
109+ {{ blog.title }}
110+ </span>
111+ </NuxtLink>
59112 </li>
60113 </ul>
61114</template>
62115
63- <script>
64- export default {
65- async asyncData({ $microcms }) {
66- const data = await $microcms.get({
67- endpoint: 'your_endpoint',
68- queries: { limit: 20, filters: 'createdAt[greater_than]2021' },
69- });
70- return data;
71- }
72- }
116+ <script setup lang="ts">
117+ import type { MicroCMSImage } from 'microcms-js-sdk';
118+
119+ type Blog = {
120+ title: string;
121+ eyecatch: MicroCMSImage;
122+ };
123+
124+ const { data: blogs } = await useMicroCMSGetList<Blog>({
125+ endpoint: 'blogs',
126+ queries: { fields: ['id', 'title', 'eyecatch'] },
127+ });
73128</script>
74129```
75130
0 commit comments