👉 Visit the DatoCMS homepage or see What is DatoCMS?

---

DatoCMS Nuxt Module

A Nuxt.js module that helps you to work faster with DatoCMS with Nuxt.

Features

This module makes components and composables from vue-datocms easily available in Nuxt.

This module takes care of authentication for you: once the module is installed and properly configured, you're free to use components and composables without worrying about the token. Refer to vue-datocms documentation for usage.

Components:

• <DatocmsImage />
• <DatocmsStructuredText />

Composables:

• useQuerySubscription
• useSiteSearch

Setup

1. Add @datocms/nuxt-module dependency to your project

npm install @datocms/nuxt-module # or yarn add @datocms/nuxt-module

2. Add @datocms/nuxt-module to the modules section of nuxt.config.js

export default {
  modules: [
    // Simple usage
    '@datocms/nuxt-module',

    // With options
    ['@datocms/nuxt-module', { /* module options */ }]
  ]
}

Using top level options

export default {
  modules: [
    '@datocms/nuxt-module'
  ],
  /* DatoCMS module options */
  datocms: {
    /* The token is mandatory: you find the token in the settings of your DatoCMS project */
    token: 'YOUR TOKEN',
  }
}

Options

token

• Type: String
• Default: process.env.NUXT_ENV_DATOCMS_API_TOKEN

The token is exposed as runtimeConfig.public.datocms.token, so it can also be provided (or overridden) at runtime through the NUXT_PUBLIC_DATOCMS_TOKEN environment variable. If no token is available at build time the module logs a warning instead of failing the build.

environment

• Type: String
• Default: process.env.NUXT_ENV_DATOCMS_ENVIRONMENT

endpoint

• Type: String
• Default: https://graphql.datocms.com

Development

Requires Node.js 22.19+ (or 24.11+).

• Copy playground/.env.example to playground/.env and set NUXT_PUBLIC_DATOCMS_TOKEN to a read-only API token of your DatoCMS project.
• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.
• Use npm run build to build the playground for production.

Deploying the playground to Vercel

The repository is ready to be deployed to Vercel as-is: import it with the repository root as the project root and Vercel will run npm run build (see vercel.json). Nitro detects the Vercel environment and emits the Build Output bundle in .vercel/output at the repository root.

Set NUXT_PUBLIC_DATOCMS_TOKEN in the Vercel project's environment variables; no token is committed to the repository.

License

MIT License

Copyright (c) - DatoCMS

---

What is DatoCMS?

DatoCMS is Headless CMS for the modern web. Trusted by 25,000+ businesses, agencies, and individuals, it gives your team one place to manage content and ship it to any website, app, or device via API.

New here? Start with Create free account and the Documentation. Stuck? Ask the Community. Curious what's new? Product Updates.

Building with AI: Agent Skills turn coding assistants (Claude Code, Cursor) into expert DatoCMS developers, with full read/write via the auto-installed CLI. No local terminal? Use the MCP Server instead.

Talking to DatoCMS from code:

• Content Delivery API (CDA) — the fast, read-only GraphQL API your website/app uses to fetch published content.
• Content Management API (CMA) — the REST API for creating and updating content, models, and project settings (think scripts, migrations, integrations).
• CLI — terminal tool for schema migrations and importing from Contentful/WordPress.

Framework guides: end-to-end recipes for fetching content, rendering Structured Text, optimizing images/video, handling SEO, and setting up live preview with visual editing in Next.js, Nuxt, Svelte, and Astro.

Want a head start? Browse our starter projects — ready-to-deploy example sites for popular frameworks.