{"id":18615589,"url":"https://github.com/hex-digital/nuxt-datocms","last_synced_at":"2025-06-14T07:12:56.900Z","repository":{"id":143639537,"uuid":"613335405","full_name":"hex-digital/nuxt-datocms","owner":"hex-digital","description":"A module for simplifying an advanced integration with DatoCMS. Simplifies getting and display content, draft previews, live update subscriptions, generating a sitemap, and more.","archived":false,"fork":false,"pushed_at":"2024-12-09T23:45:16.000Z","size":1568,"stargazers_count":7,"open_issues_count":4,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-23T12:46:40.158Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hex-digital.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["jamiewarb"]}},"created_at":"2023-03-13T11:25:18.000Z","updated_at":"2024-10-22T15:56:13.000Z","dependencies_parsed_at":"2024-10-22T23:33:27.734Z","dependency_job_id":null,"html_url":"https://github.com/hex-digital/nuxt-datocms","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fnuxt-datocms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fnuxt-datocms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fnuxt-datocms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hex-digital%2Fnuxt-datocms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hex-digital","download_url":"https://codeload.github.com/hex-digital/nuxt-datocms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248325112,"owners_count":21084870,"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-07T03:30:39.461Z","updated_at":"2025-04-11T01:31:13.256Z","avatar_url":"https://github.com/hex-digital.png","language":"TypeScript","funding_links":["https://github.com/sponsors/jamiewarb"],"categories":[],"sub_categories":[],"readme":"# Nuxt DatoCMS\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nNuxt 3 module for [DatoCMS](https://datocms.com/), a wonderful Headless CMS.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n\u003c!-- - [🏀 Online playground](https://stackblitz.com/github/hex-digital/nuxt-datocms?file=playground%2Fapp.vue) --\u003e\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Features\n\n- ⛰ Integration with Nuxt's `useAsyncData()` for de-duplicated requests\n- 🌲 Pre-configured preview mode for draft content, and real-time updates\n- 👌 Auto-imports composables + components from [`vue-datocms`](https://github.com/datocms/vue-datocms)\n- 🧭 Easily generate a sitemap for your DatoCMS-powered site (coming soon)\n- ⚙️ Compatible with any data-fetching library (Villus, Apollo, axios, etc) (coming soon)\n\n## Usage\n\n_Note: This module is for Nuxt 3. We do not provide a Nuxt 2 version._\n\n\u003e If you are a first-time DatoCMS user, read the [Nuxt DatoCMS](https://www.datocms.com/cms/nuxtjs-cms) page \n\u003e to get a project ready in less than 5 minutes.\n\n### Installation\n\n1. Add `@hexdigital/nuxt-datocms` dependency to your project\n\n```bash\nnpx nuxi@latest module add datocms\n```\n\n2. Add `@hexdigital/nuxt-datocms` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    '@hexdigital/nuxt-datocms'\n  ]\n});\n```\n\n3. Configure the options for this module. If you want to enable viewing draft content, set the optional parameters too:\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    '@hexdigital/nuxt-datocms'\n  ],\n  datocms: {\n    publicReadOnlyToken: '\u003cdato-cms-read-only-published-token\u003e',\n\n    // Optional - if you'd like to enable draft previews\n    privateDraftEnabledToken: '\u003cdato-cms-read-only-draft-enabled-token\u003e',\n    privatePreviewModePassword: 'showmethenewstuff', // A password required to enable draft previews\n    privatePreviewModeEncryptionSecret: '14e6f2b5ebefb46270ed411e916c452a377c70f5d548cb6b672ec40d7e1ab8ef', // A hash that is stored on the User's device once draft is enabled, to prove it's legitimate. Change this to turn-off all currently active draft previews\n\n    // Optional - if you'd like to allow user's to preview new content without needing to enter a password (beta documentation that's open for feedback, for example).\n    disablePreviewPassword: true, // defaults to false\n\n    // Optional - if you'd like to disable using the default server API routes for draft preview (so you can create your own, for example)\n    registerApiHandlers: false, // defaults to true\n\n    // Optional - do not include environment if you're not using environments, and usually no need to include endpoint either\n    // environment: 'production', // defaults to undefined\n    // endpoint: 'https://graphql.datocms.com',\n  },\n});\n```\n\nAPI tokens can be generated inside of your project, in Settings \u003e API tokens. See image below\n\n![img.png](img.png)\n\nThat's it! You can now use Nuxt DatoCMS in your Nuxt app ✨\n\n### Requesting content\n\nThis module exposes two main composables, `useAsyncDatoCms()` and `useDatoCms()`.\n\nFor most cases, we recommend using `useAsyncDatoCms()`. It's a wrapper around Nuxt's `useAsyncData()`, which allows\nus to de-duplicate our requests when using SSR, amongst other benefits.\n\n```\n// pages/index.vue\n\n// This module sets `toHead` and `useAsyncDatoCms` to be auto-imported by Nuxt, if you have this enabled, so these imports aren't needed\nimport { toHead } from 'vue-datocms';\nimport { useAsyncDatoCms } from '@hexdigital/nuxt-datocms';\n\nimport { homepageQuery } from '~/apis/dato-cms/graphql/queries/getHomepage';\n\nconst { data } = await useAsyncDatoCms({ query: homepageQuery });\n\n// An example of using page data to set your SEO tags for the page\nuseHead(() =\u003e toHead(data.value?.homepage?._seoMetaTags || {}));\n```\n\nIf you're not looking to use `useAsyncData()` at all, then you can use the `useDatoCms()` composable instead. The\nbehaviour is the same, just without the `useAsyncData()` wrapper around the fetch call.\n\n## Module Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Generate type stubs\npnpm run dev:prepare\n\n# Develop with the playground\npnpm run dev\n\n# Build the playground\npnpm run dev:build\n\n# Run ESLint\npnpm run lint\n\n# Run Vitest\npnpm run test\npnpm run test:watch\n\n# Release new version\npnpm run release\n```\n\n## Contributing\n\nAll contributions are welcome. Please see our [Contribution Guidelines](./CONTRIBUTING.md).\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@hexdigital/nuxt-datocms/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/@hexdigital/nuxt-datocms\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@hexdigital/nuxt-datocms.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/@hexdigital/nuxt-datocms\n\n[license-src]: https://img.shields.io/npm/l/@hexdigital/nuxt-datocms.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/@hexdigital/nuxt-datocms\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhex-digital%2Fnuxt-datocms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhex-digital%2Fnuxt-datocms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhex-digital%2Fnuxt-datocms/lists"}