Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/microcmsio/nuxt-microcms-module
microCMS integration for Nuxt.
https://github.com/microcmsio/nuxt-microcms-module
Last synced: 5 days ago
JSON representation
microCMS integration for Nuxt.
- Host: GitHub
- URL: https://github.com/microcmsio/nuxt-microcms-module
- Owner: microcmsio
- License: apache-2.0
- Created: 2021-06-19T14:36:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-14T06:18:19.000Z (over 1 year ago)
- Last Synced: 2024-10-30T19:23:50.529Z (18 days ago)
- Language: TypeScript
- Homepage:
- Size: 209 KB
- Stars: 28
- Watchers: 7
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nuxt-microcms-module
[microCMS](https://microcms.io) integration for [Nuxt](https://nuxt.com/).
Attention❗️
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).
## Getting Started
### Install
```bash
$ npm install nuxt-microcms-module
```
### Setup
```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.
### Hot to use
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
-
{{ blog.title }}
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'] },
});
```
#### Use reactive values for query parameters
```vue
import type { MicroCMSImage } from 'microcms-js-sdk';
type Blog = {
title: string;
eyecatch: MicroCMSImage;
};
const queries = reactive({
q: '',
fields: ['id', 'title', 'eyecatch'],
});
const { data: blogs, refresh } = await useMicroCMSGetList<Blog>({
endpoint: 'blogs',
queries,
});
watch(queries, () => {
refresh();
});
```
# LICENSE
Apache-2.0