nuxt-microcms-module

microCMS integration for Nuxt.

Attention❗️
This module is intended for Nuxt version 3 and 4. If you are using version 2, please perform npm install nuxt-microcms-module@2 and refer here.

Getting Started

$3

``bash
$ npm install nuxt-microcms-module
`

$3

`typescript
// nuxt.config.ts

export default defineNuxtConfig({
modules: [
[
'nuxt-microcms-module',
{
serviceDomain: 'YOUR_DOMAIN', // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
apiKey: 'YOUR_API_KEY',
// target: 'server',
},
],
],
// or
modules: ['nuxt-microcms-module'],
microCMS: {
serviceDomain: 'YOUR_DOMAIN',
apiKey: 'YOUR_API_KEY',
// target: 'server',
},
});
`

#### serviceDomain

String
Required.
Your service id, which is a subdomain of microCMS.

#### apiKey

String
Required.
Your api-key.
It can be obtained from the service settings.

#### target

String (can be server or all)
Default: server
By setting this value to all, the api-key you set will be included in the client-side code.
This will allow the client side to send requests to microCMS.
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.

$3

We provide several custom hooks that can be used globally.
These are functions that internally wrap useFetch.

`typescript
type useMicroCMSGetList = (
args: {
endpoint: string;
queries?: MicroCMSQueries;
},
fetchOptions?: FetchOptions
) => Promise>>;
type useMicroCMSGetListDetail = (
args: {
endpoint: string;
contentId: string;
queries?: MicroCMSQueries;
},
fetchOptions?: FetchOptions
) => Promise>;
type useMicroCMSGetObject = (
args: {
endpoint: string;
queries?: MicroCMSQueries;
},
fetchOptions?: FetchOptions
) => Promise>;

// 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
`

`vue



`

#### Use reactive values for query parameters

`vue



``

LICENSE

Apache-2.0