Best Headless CMS for Nuxt: 6 Nuxt CMS Options Compared

The best headless CMS for Nuxt depends on who edits the content and where you want it hosted. This guide compares six Nuxt CMS options on the points that matter for a Nuxt project: the Nuxt integration, live preview, hosting and pricing. It also covers when you don't need a CMS at all, because Nuxt Content and Markdown files are enough.

What Is the Best Headless CMS for Nuxt?

What is the best headless CMS for Nuxt? There's no single winner. There is a clear pick for each kind of project, though:

Marketing site where editors build pages visually: Storyblok.
Open source and self-hosted, with a JavaScript team: Strapi.
Highly structured content and a custom editing UI: Sanity.
An app that already has its own SQL database: Directus.
A large organization publishing to many sites and channels: Contentful.
Slice-based landing pages on a small budget: Prismic.
A blog or docs that only developers edit: Nuxt Content, no CMS needed.

CMS	Nuxt integration	Visual preview	Hosting	Free option
Storyblok	`@storyblok/nuxt` (by Storyblok)	Visual Editor, free plan included	Hosted	Free Starter plan
Strapi	`@nuxtjs/strapi` (community)	Preview; side-by-side Live Preview on paid plans	Self-hosted or Strapi Cloud	Free self-hosted Community edition
Sanity	`@nuxtjs/sanity` (community)	Visual Editing and Presentation tool, all plans	Hosted Content Lake, open-source Studio	Free plan
Directus	`@directus/sdk` in a Nuxt plugin	Visual Editor	Self-hosted or Directus Cloud	Self-hosted; no-cost grant for small orgs
Contentful	`contentful` JS SDK	Live Preview SDK	Hosted	Check the pricing page
Prismic	`@nuxtjs/prismic`	Previews and Page Builder, all plans	Hosted	Free plan

What Is a Nuxt JS CMS?

A Nuxt JS CMS is a content management system that stores your content and serves it to a Nuxt app over an API. The CMS has no theme and renders no pages. Nuxt fetches the content and turns it into HTML, on the server or at build time. That split is why a headless CMS and Nuxt pair well: editors work in the CMS dashboard, and developers keep full control of the frontend.

For a CMS Nuxt.js setup, the main thing to know is that Nuxt already handles routing, data fetching and SEO meta, so the CMS only has to deliver content. If you're new to the framework, What is Nuxt covers the basics.

What to Look For in a Nuxt Headless CMS

Almost any CMS with an API can feed a Nuxt app, so the real differences are elsewhere. When you choose a Nuxt headless CMS, start with the integration. A maintained module or SDK that supports Nuxt 3 and 4 saves you from writing and maintaining your own plugin, and npm shows quickly whether it's still being published.

Live preview comes next, and it's the feature editors will ask about first. They want to see a draft on the real Nuxt page before it goes out. Some vendors include visual editing on the free plan. Others keep it for paid tiers.

Then check how the CMS fits your rendering mode. A static site needs a build hook so publishing triggers a redeploy. Server-rendered pages need fast API responses and a cache. Our guide to SSR, SSG and CSR in Vue explains the trade-offs.

The last two are content modeling (reusable blocks, references between entries, localization) and cost. Price seats and API usage for your real team, not the demo. Whichever Nuxt.js headless CMS you pick, keep the API token in private runtime config so it never ships to the browser.

Best CMS for Nuxt: 6 Options

Here is the best CMS for Nuxt in each category, compared on the same points. Prices are from each vendor's pricing page in November 2026. Every CMS Nuxt can talk to over REST or GraphQL would technically fit; these six are the ones with real Nuxt support.

Storyblok

Best for: marketing teams that build and rearrange pages themselves.
Nuxt integration: @storyblok/nuxt, maintained by Storyblok and compatible with Nuxt 3 and 4.
Live preview: the Visual Editor shows the live Nuxt page next to the fields. Click a block on the page to edit it, which works through the v-editable directive.
Hosting: hosted SaaS.
Pricing: the free Starter plan includes the Visual Editor. Growth is $99 a month on monthly billing.

Content is delivered through a REST API and a read-only GraphQL API.

Strapi

Best for: teams that want an open-source backend they run themselves.
Nuxt integration: @nuxtjs/strapi, a community module in the nuxt-modules organization. Strapi also ships its own @strapi/client.
Live preview: Preview opens a draft in your frontend. The side-by-side Live Preview, still marked experimental, needs the Growth or Enterprise plan.
Hosting: self-host the free Community edition, or use Strapi Cloud.
Pricing: self-hosted Growth is $45 a month for 3 users. Strapi Cloud starts at $35 a month per project.

Strapi exposes REST by default and GraphQL through a plugin.

Sanity

Best for: structured content reused across pages, apps and channels.
Nuxt integration: @nuxtjs/sanity, a community module that Sanity's own Nuxt guide uses.
Live preview: Visual Editing and the Presentation tool are included on every plan, Free included.
Hosting: content lives in Sanity's hosted Content Lake. The editing Studio is open source (MIT), so you can customize it or embed it in your app.
Pricing: Free costs nothing. Growth is $15 per seat per month.

You query with GROQ, Sanity's query language, or deploy a GraphQL API.

Directus

Best for: data-heavy apps where content sits next to business data.
Nuxt integration: Directus recommends its @directus/sdk in a small Nuxt plugin, plus @directus/visual-editing. The community nuxt-directus module hasn't been published since 2024.
Live preview: a Visual Editor and a live preview guide for Nuxt.
Hosting: connect it to your own database and it generates REST and GraphQL APIs. You can self-host it or use Directus Cloud.
Pricing: Core costs $99 a month on monthly billing. Organizations under $5M in annual revenue and with fewer than 50 employees qualify for no-cost access through Directus's grant.

Contentful

Best for: large organizations with many sites, locales and content teams.
Nuxt integration: no current Nuxt module. You use the contentful JavaScript SDK from a Nuxt plugin or server route; the module listed on nuxt.com only supports Nuxt 2.
Live preview: the Live Preview SDK ships React helpers and a plain JavaScript path, so in Nuxt you wire it up yourself.
Hosting: hosted SaaS.
Pricing: check contentful.com/pricing. It's the one vendor here whose current plans we couldn't confirm when writing this.

Content comes from the REST Content Delivery and Preview APIs, plus a GraphQL API.

Prismic

Best for: landing pages assembled from reusable sections ("slices").
Nuxt integration: @nuxtjs/prismic, which Prismic's docs call its first-party Nuxt integration.
Live preview: full-site previews through a /preview route, and a Page Builder with live slice thumbnails, both included on every plan.
Hosting: hosted SaaS.
Pricing: there's a free plan. Starter is $10 a month per repository, billed annually.

Nuxt Content vs a Headless CMS

Sometimes the best CMS for a Nuxt site is no CMS. Nuxt Content (@nuxt/content, now v3) reads Markdown, YAML and JSON files from your repository. You define typed collections in content.config.ts and query them with queryCollection. Every change goes through Git, so you get history, review and rollbacks for free.

That's enough when developers write most of the content, or when editors are fine with a Git-based workflow. This blog is an example: every post is a Markdown file rendered by Nuxt Content, and editors who don't use Git work through Decap CMS, which commits to the repository for them.

It stops being enough when marketers want to rebuild pages, schedule campaigns or publish in several languages without opening a pull request. That's when a headless CMS earns its place. The free nuxt-studio module closes part of the gap with visual editing for Nuxt Content, but it needs a server-rendered deployment. A site that is pre-rendered as static files can't host it as-is.

How to Build a CMS Website With Nuxt

The steps for a CMS website with Nuxt are the same whichever CMS you pick:

Model the content first. List the page types, reusable blocks and fields before you touch code.
Start from a Nuxt CMS starter. Storyblok, Sanity and Directus each maintain one, or run npm create nuxt@latest and add the CMS module yourself.
Add the module or SDK and put the API token in runtimeConfig.
Map each CMS block type to one Vue component, so editors can rearrange pages without a developer.
Fetch content in pages with useAsyncData or useFetch, and set titles and meta from CMS fields with useSeoMeta.
Wire up previews and a publish webhook. The webhook triggers a rebuild for a static site or clears the cache for a server-rendered one.

The same pattern works for commerce, where products come from a commerce API instead of a CMS. Our guide to an e-commerce store with Medusa and Nuxt 4 walks through it.

Conclusion

Pick the CMS by who edits and where it has to run. Storyblok or Prismic if marketers build pages. Sanity for structured content. Strapi or Directus if it has to live on your own servers, and Contentful for large content teams. And if developers own the content, Nuxt Content and a folder of Markdown files may be all you need.

As an official Nuxt partner, we connect Nuxt to headless CMS platforms and APIs as part of our Nuxt development services.

FAQs

Which headless CMS works best with Nuxt?

Storyblok and Sanity have the tightest Nuxt fit today: both have maintained Nuxt modules and visual editing on their free plans. Pick Storyblok if marketers build pages themselves, and Sanity if your content is highly structured and developers want to shape the editing UI.

What are the best CMS platforms for Nuxt?

The six worth shortlisting are Storyblok, Strapi, Sanity, Directus, Contentful and Prismic. For content that only developers edit, Nuxt Content is often enough and needs no separate service.

What is the best CMS for Nuxt developers?

If developers are the only editors, Nuxt Content: pages are Markdown or YAML files in the repo, typed through collections and queried with queryCollection. If the team wants a full backend they control, Strapi or Directus can be self-hosted and gives them both the API and the admin panel.

Can I use WordPress as a CMS for Nuxt?

Yes. WordPress works as a headless CMS through its built-in REST API or the WPGraphQL plugin, and Nuxt renders the public site. It makes most sense when editors already know WordPress. Our guide to headless WordPress with Nuxt covers the setup.

Is Nuxt Content a CMS?

It is a file-based content layer rather than a hosted CMS: content lives in Markdown, YAML or JSON files in your repository. With the free Nuxt Studio module, non-developers can also edit that content in a visual editor, and their changes are committed back to GitHub or GitLab.

Is there a Nuxt CMS starter?

Yes. Storyblok, Sanity and Directus each maintain a Nuxt starter: storyblok/blueprint-core-nuxt, sanity-io/sanity-template-nuxt-clean and the Nuxt template in directus-labs/starters. The older Strapi and Prismic Nuxt starters are archived, so start from their docs instead.

Does a headless CMS work with Nuxt SSR?

Yes. Nuxt fetches content from the CMS API on the server or at build time, so crawlers get full HTML either way. Keep API tokens in private runtime config so they stay on the server and never reach the browser.