👉 Visit the DatoCMS homepage or see What is DatoCMS?

---

Nuxt 3 + DatoCMS + Bulma demo

This is a demo of how to use Nuxt 3 and DatoCMS together. The demo includes a preview feature that:

• displays draft contents;
• updates content immediately when saving DatoCMS records, without the need to reload the page.

To keep the demo simple, content preview is available only for records that have been published at least once. More on previews below.

Deploy on DatoCMS

Preview mode and deploy environment

To take advantage of preview mode, deploy environment must support edge functions. That shouldn't be an issue: most of the providers have some form of edge function, these days. For more info, make sure to skim the list available at Nitro — the server framework that Nuxt is based upon.

Safety check before production

If you use this demo as a starting point for a project and you plan to deploy to production, take some time to understand how to properly configure secrets, so that no reserved information (like, for example, DatoCMS contents in draft status) gets leaked.

Only one environment variable (NUXT_ENV_DATOCMS_API_TOKEN) is strictly required to have the project working. You can set it via the .env file, like explained in the next section. Though, before deploying to production, you should set following 4 environment variables:

• NUXT_ENV_PREVIEW_MODE_PASSWORD: the password that users must have to enable preview mode;
• NUXT_ENV_DATOCMS_API_BUNDLE_SAFE_TOKEN: a DatoCMS token with read-only permissions and no access to draft contents: this token can be included in the bundles produced by Nuxt at deploy;
• NUXT_ENV_DATOCMS_API_DRAFT_ENABLED_TOKEN: a DatoCMS token with read-only permissions and access to draft contents: this token will be potentially accessible only to users who have access to the preview mode (thus, only to people that know the preview mode password and are therefore expected to see draft contents);
• NUXT_ENV_PREVIEW_MODE_ENCRYPTION_SECRET: this secret is meant to sign the cookie that enables preview mode: it can be any random string.

With these secrets in place, you can safely go to production. NUXT_ENV_DATOCMS_API_TOKEN won't be used anymore and only tokens with the minimum amount of permissions will be potentially visible to people visiting the website.

Local development

For a quick start, set a Dato read-only API token in the .env file:

echo 'NUXT_ENV_DATOCMS_API_TOKEN=abc123' >> .env

Then you can install the dependencies and start the project:

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

Other Nuxt conventional scripts:

# build for production and launch server
$ npm run build
$ npm run preview

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt docs.

---

What is DatoCMS?

DatoCMS is the REST & GraphQL Headless CMS for the modern web.

Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our developers, content editors and marketers!

Why DatoCMS?

• API-First Architecture: Built for both REST and GraphQL, enabling flexible content delivery
• Just Enough Features: We believe in keeping things simple, and giving you the right feature-set tools to get the job done
• Developer Experience: First-class TypeScript support with powerful developer tools

Getting Started:

• ⚡️ Create Free Account - Get started with DatoCMS in minutes
• 🔖 Documentation - Comprehensive guides and API references
• ⚙️ Community Support - Get help from our team and community
• 🆕 Changelog - Latest features and improvements

Official Libraries:

• Content Delivery Client - TypeScript GraphQL client for content fetching
• REST API Clients - Node.js/Browser clients for content management
• CLI Tools - Command-line utilities for schema migrations (includes Contentful and WordPress importers)

Official Framework Integrations

Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:

• React Components
• Vue Components
• Svelte Components
• Astro Components

Additional Resources:

• Plugin Examples - Example plugins we've made that extend the editor/admin dashboard
• Starter Projects - Example website implementations for popular frameworks
• All Public Repositories