{"id":19900635,"url":"https://github.com/microcmsio/nuxt-microcms-module","last_synced_at":"2025-05-02T23:31:04.241Z","repository":{"id":48472659,"uuid":"378433450","full_name":"microcmsio/nuxt-microcms-module","owner":"microcmsio","description":"microCMS integration for Nuxt.","archived":false,"fork":false,"pushed_at":"2023-06-14T06:18:19.000Z","size":214,"stargazers_count":29,"open_issues_count":0,"forks_count":4,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-01T01:53:05.677Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microcmsio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-19T14:36:52.000Z","updated_at":"2025-03-20T14:41:48.000Z","dependencies_parsed_at":"2024-06-21T04:17:23.942Z","dependency_job_id":"4ae18ab3-4924-4fc0-b236-e96ad0815b25","html_url":"https://github.com/microcmsio/nuxt-microcms-module","commit_stats":{"total_commits":42,"total_committers":5,"mean_commits":8.4,"dds":"0.38095238095238093","last_synced_commit":"be829b483f96c7d5e0785b608bb053ece12063e3"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fnuxt-microcms-module","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fnuxt-microcms-module/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fnuxt-microcms-module/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microcmsio%2Fnuxt-microcms-module/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microcmsio","download_url":"https://codeload.github.com/microcmsio/nuxt-microcms-module/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252122211,"owners_count":21698305,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T20:12:49.804Z","updated_at":"2025-05-02T23:31:03.904Z","avatar_url":"https://github.com/microcmsio.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# nuxt-microcms-module\n\n[microCMS](https://microcms.io) integration for [Nuxt](https://nuxt.com/).\n\nAttention❗️  \nThis 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).\n\n## Getting Started\n\n### Install\n\n```bash\n$ npm install nuxt-microcms-module\n```\n\n### Setup\n\n```typescript\n// nuxt.config.ts\n\nexport default defineNuxtConfig({\n  modules: [\n    [\n      'nuxt-microcms-module',\n      {\n        serviceDomain: 'YOUR_DOMAIN', // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io\n        apiKey: 'YOUR_API_KEY',\n        // target: 'server',\n      },\n    ],\n  ],\n  // or\n  modules: ['nuxt-microcms-module'],\n  microCMS: {\n    serviceDomain: 'YOUR_DOMAIN',\n    apiKey: 'YOUR_API_KEY',\n    // target: 'server',\n  },\n});\n```\n\n#### serviceDomain\n\n`String`  \nRequired.  \nYour service id, which is a subdomain of microCMS.\n\n#### apiKey\n\n`String`  \nRequired.  \nYour api-key.  \nIt can be obtained from the service settings.\n\n#### target\n\n`String` (can be `server` or `all`)  \nDefault: `server`  \nBy setting this value to `all`, the api-key you set will be included in the client-side code.  \nThis will allow the client side to send requests to microCMS.  \nIf 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.\n\n### Hot to use\n\nWe provide several custom hooks that can be used globally.  \nThese are functions that internally wrap useFetch.\n\n```typescript\ntype useMicroCMSGetList = \u003cT\u003e(\n  args: {\n    endpoint: string;\n    queries?: MicroCMSQueries;\n  },\n  fetchOptions?: FetchOptions\n) =\u003e Promise\u003cAsyncData\u003cMicroCMSListResponse\u003cT\u003e\u003e\u003e;\ntype useMicroCMSGetListDetail = \u003cT\u003e(\n  args: {\n    endpoint: string;\n    contentId: string;\n    queries?: MicroCMSQueries;\n  },\n  fetchOptions?: FetchOptions\n) =\u003e Promise\u003cAsyncData\u003cT \u0026 MicroCMSListContent\u003e\u003e;\ntype useMicroCMSGetObject = \u003cT\u003e(\n  args: {\n    endpoint: string;\n    queries?: MicroCMSQueries;\n  },\n  fetchOptions?: FetchOptions\n) =\u003e Promise\u003cAsyncData\u003cT \u0026 MicroCMSObjectContent\u003e\u003e;\n\n// FetchOptions is the same as the second argument option of useFetch provided by Nuxt3.\n// AsyncData is the return value of useFetch.\n// https://nuxt.com/docs/api/composables/use-fetch\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cul\u003e\n    \u003cli v-for=\"blog in blogs?.contents\" :key=\"blog.id\"\u003e\n      \u003cNuxtLink :to=\"`/${blog.id}`\"\u003e\n        \u003cimg\n          :src=\"blog.eyecatch.url\"\n          :width=\"blog.eyecatch.width\"\n          :height=\"blog.eyecatch.height\"\n          alt=\"\"\n        /\u003e\n        \u003cspan\u003e\n          {{ blog.title }}\n        \u003c/span\u003e\n      \u003c/NuxtLink\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport type { MicroCMSImage } from 'microcms-js-sdk';\n\ntype Blog = {\n  title: string;\n  eyecatch: MicroCMSImage;\n};\n\nconst { data: blogs } = await useMicroCMSGetList\u003cBlog\u003e({\n  endpoint: 'blogs',\n  queries: { fields: ['id', 'title', 'eyecatch'] },\n});\n\u003c/script\u003e\n```\n\n#### Use reactive values for query parameters\n\n```vue\n\u003ctemplate\u003e\n  \u003cinput type=\"text\" v-model=\"queries.q\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport type { MicroCMSImage } from 'microcms-js-sdk';\n\ntype Blog = {\n  title: string;\n  eyecatch: MicroCMSImage;\n};\n\nconst queries = reactive({\n  q: '',\n  fields: ['id', 'title', 'eyecatch'],\n});\n\nconst { data: blogs, refresh } = await useMicroCMSGetList\u003cBlog\u003e({\n  endpoint: 'blogs',\n  queries,\n});\n\nwatch(queries, () =\u003e {\n  refresh();\n});\n\u003c/script\u003e\n```\n\n# LICENSE\n\nApache-2.0\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocmsio%2Fnuxt-microcms-module","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrocmsio%2Fnuxt-microcms-module","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrocmsio%2Fnuxt-microcms-module/lists"}