7 Best Headless CMS Platforms for Nuxt (2026)

If Nuxt is your frontend framework, which CMS should you pair it with? This article covers seven platforms specifically evaluated for Nuxt in 2026: Prismic, Storyblok, Sanity, Strapi, Payload, Hygraph, and Directus.

What makes a headless CMS a good fit for Nuxt?

The following elements set a strong Nuxt CMS integration apart from a generic API that requires extra configuration.

• Official Nuxt module vs. manual plugin setup: An official Nuxt module registers itself in nuxt.config.ts, auto-imports composables and components, and handles SSR and preview setup automatically. If the CMS ships a generic JavaScript SDK instead, you can initialize it in a Nuxt plugin, but you'll still handle auto-imports and SSR-safe fetching yourself. Without either, you're making raw API calls and wiring everything from scratch.
• On-demand cache invalidation: ISR requires Nitro route rules in nuxt.config.ts and a way to invalidate cached pages when content changes. Most CMSs handle this via webhooks, but how well they document the Nuxt-specific setup varies.
• Rendering mode support (SSR, SSG, ISR): Nuxt supports all three rendering modes. CMSs that document SSR, SSG, and ISR integration will save development time.
• Live preview in Nuxt: Some CMSs provide a dedicated Nuxt integration for preview mode. Others use iframe-based editors, which may require adjustments to your frontend's Content Security Policy.
• Nuxt starter templates: An official starter means the module, routing, and preview are already wired up, allowing you to build faster.

Now that we have the right context and evaluation criteria in mind, let’s explore these headless CMS solutions for Nuxt. The table below summarizes the learnings from each platform.

7 Best headless CMS platforms for Nuxt

1. Prismic:

Best for: Nuxt teams seeking a visual Page Builder for marketers and a component-driven developer workflow

Prismic is a headless website builder built around a component-driven Page Builder, designed for teams that want developers and marketers working independently without stepping on each other.

Developers build reusable page sections called Slices using Slice Machine, locally alongside their Nuxt code. Marketers then use the Page Builder to assemble and publish the pages they need without filing a developer ticket.

Nuxt-specific strengths

• @nuxtjs/prismic is the official Nuxt module, maintained by Prismic. Adding it to nuxt.config.ts auto-imports all @prismicio/vue components across the project, including <PrismicRichText>, <PrismicImage>, <PrismicLink>, and <SliceZone>, eliminating any manual registrations.
• Content fetching uses the usePrismic() composable, which gives direct access to the Prismic client and isFilled helpers inside <script setup>. It pairs naturally with useAsyncData, which handles SSR, caching, and hydration the Nuxt way.
• TypeScript types are generated per Slice and page type automatically, so content responses are fully typed in your .vue files.
• The module registers a /preview route automatically. Editors see real-time updates inside the Page Builder via the /slice-simulator route and the <SliceSimulator> component.
• Works with hosting providers like Cloudflare and Vercel, which support Nitro's edge runtimes.
• The Nuxt module also handles route resolvers and i18n forwarding through nuxt.config.ts.
• There's a Prismic Nuxt starter that you can use to get started quickly.

Nuxt-based limitations

• New page layouts still require a developer to build the Slice first.

Pricing

• Free
• Starter ($10/month)
• Small ($25/month)
• Medium ($150/month)
• Platinum ($675/month)
• Enterprise (Custom)

Resources

• Prismic docs
• Nuxt guide
• @nuxtjs/prismic v5 reference

2. Storyblok

Best for: Nuxt teams that want WYSIWYG in-page editing with real-time preview

Storyblok is built around a component-based Visual Editor, where developers define reusable content blocks, and editors assemble pages through a drag-and-drop interface that supports real-time previews.

Nuxt-specific strengths

• @storyblok/nuxt is Storyblok's official Nuxt module. As of v9, it brings full compatibility with Nuxt 4 while maintaining backward compatibility with Nuxt 3.15+.
• The module makes useAsyncStoryblok and StoryblokComponent available as auto-imports across the entire project, with no manual registration needed.
• Vue components placed in the /storyblok directory are automatically imported and mapped to their Storyblok block names. A block called hero in Storyblok maps to Hero.vue and renders automatically via StoryblokComponent.
• The v-editable directive connects any Vue component to the Visual Editor, so edits appear in the preview pane as the editor types, with no page reload.
• Storyblok has a starter repo for Nuxt projects.

Nuxt-based limitations

• No built-in TypeScript type generation for content models. You need a community tool like storyblok-generate-ts or manual type definitions.
• The Visual Editor loads the frontend inside an iframe, so sites with strict Content Security Policy headers need adjustments before the editor can load.
• @storyblok/nuxt v9 dropped support for older Nuxt 3 data-handling patterns, so upgrading from earlier versions requires some migration work.

Pricing

• Starter (Free)
• Growth (€90.75/mo)
• Growth Plus (€319.91/mo)
• Premium & Elite (Custom)

Resources

• Storyblok docs
• Storyblok Nuxt guide

3. Sanity

Best for: Nuxt teams that need structured content and visual editing configured in

Sanity has a structured content approach where your schema lives in code, and your content is stored in a hosted Content Lake you query with GROQ, Sanity's own query language.

Nuxt-specific strengths

• @nuxtjs/sanity is a dedicated Nuxt module (maintained by the Nuxt team) that handles client configuration, data fetching, TypeScript type generation, and visual editing setup.
• The module provides a useSanityQuery composable that works natively inside <script setup> with TypeScript generics for typed content responses.
• The typegen option in nuxt.config.ts reads your Studio schema and .vue file paths to automatically generate typed GROQ query responses, with no separate codegen step.
• Visual editing is configured via the visualEditing option in the module config, letting editors click on content in the preview pane to jump directly to the corresponding field in Sanity Studio.
• The module also provides zero-config components like SanityFile and SanityImage.
• Sanity provides two official Nuxt starters for a quick start.

Nuxt-based limitations

• Developers must first learn how to use Sanity’s GROQ before they can fetch content effectively.

Pricing

• Free
• Growth ($15/month/per seat)
• Enterprise (custom)

Resources

• Sanity docs
• Nuxt Sanity
• Sanity Nuxt guide

4. Strapi

Best for: Nuxt teams that want an open-source, self-hostable CMS

Strapi, an open-source headless CMS, lets you design your content models while the platform generates REST and GraphQL APIs on top of them, without writing backend code.

Nuxt-specific strengths

• There’s a @nuxtjs/strapi module that auto-imports composables across the project.
• The module provides Strapi Devtools integration, built-in authentication via useStrapiUser, TypeScript support, and error handling hooks.
• Because Strapi's API is framework-agnostic, you can also use useFetch or useAsyncData directly with your Strapi URL without the module.
• Strapi 5 is supported via the version: 'v5' config option, and the Strapi documentation links to @nuxtjs/strapi as the recommended Nuxt integration path.
• Live preview works with Nuxt's native preview mode on the Growth plan and above.

Nuxt-based limitations

• @nuxtjs/strapi is maintained by the Nuxt team, not Strapi, so updates depend on the Nuxt team's priorities and may not keep pace with new Strapi releases.
• There is no official Strapi-maintained Nuxt starter template.
• Live preview requires the Growth plan ($45/month) and is not available on the free Community version.

Pricing

• Community (Free)
• Growth ($45/month)
• Enterprise (Custom)

Resources

• Strapi docs
• Nuxt Strapi
• Strapi Nuxt integration guide

5. Payload

Best for: Nuxt teams that are comfortable with a manual integration setup

Payload is an open-source, code-first headless CMS and application framework built with TypeScript and React. You define your content schema in code, and Payload generates a full admin panel, REST API, and GraphQL API on top of it.

Nuxt-specific strengths

• @payloadcms/live-preview-vue provides a useLivePreview composable for Vue 3 and Nuxt 3 projects, giving you a client-side live preview.
• The REST and GraphQL APIs are framework-agnostic, so you can use useAsyncData or $fetch in Nuxt, to retrieve content without any adapter.
• Payload is TypeScript-native. Content types defined in your Payload config can be imported and used directly in your Nuxt project for typed API responses.

Nuxt-based limitations

• There is no official Nuxt module. You set up a Nuxt plugin from scratch to initialize the Payload client and manage configuration manually.
• Server-side live preview officially supports React only. Nuxt projects are limited to client-side live preview via useLivePreview.
• There are no Nuxt starter templates and no Nuxt-specific documentation beyond the live preview page.

Pricing

• Free (Open source)

Resources

• Payload docs

6. Hygraph

Best for: Nuxt teams comfortable with GraphQL and content federation

Hygraph is a GraphQL-native headless CMS with content federation at its core. Instead of treating your CMS as a single source of truth, Hygraph lets you stitch in data from external APIs, ecommerce platforms, or other systems and query everything through one GraphQL endpoint.

Nuxt-specific strengths

• nuxt-graphql-client, a community Nuxt module, handles GraphQL codegen for Hygraph queries. Drop your .gql files into a queries folder, and it auto-generates typed helper functions like GqlPages() and GqlPage().
• Hygraph works as a native image provider for @nuxt/image. Point it at Hygraph's asset CDN in nuxt.config.ts, and Nuxt handles resizing and optimization.
• Live preview works through a Nuxt plugin that watches for a ?preview=true query param and exposes a $preview variable across components.
• There are two Hygraph Nuxt starters that you can use to speed up the development process.

Nuxt-based limitations

• Hygraph itself doesn't offer a dedicated Nuxt SDK, meaning you must rely on community tools like nuxt-graphql-client.
• GraphQL is the only query option, so there's a learning curve if your team is coming from a REST-based CMS.
• The free Hobby plan has usage limits that make it more ideal for prototyping, and the first paid plan costs $199/month, making Hygraph expensive.

Pricing

• Hobby (Free)
• Growth ($199/month)
• Enterprise (Custom)

Resources

• Hygraph docs
• Hygraph Nuxt guide

7. Directus

Best for: Nuxt teams that want a CMS layer over an existing SQL database with full self-hosting control

Directus wraps around your existing SQL database (PostgreSQL, MySQL, SQLite, and others) and instantly generates REST and GraphQL APIs, an admin interface, and real-time WebSocket support on top of it, without touching your schema.

Nuxt-specific strengths

• The @directus/sdk is a composable client. You initialize it in a Nuxt plugin (plugins/directus.ts) and expose it across all pages and components via useNuxtApp().
• The SDK supports TypeScript out of the box.
• There's a nuxt-directus module maintained by the Nuxt team. It handles authentication, REST methods, and TypeScript support out of the box.

Nuxt-based limitations

• There is no official Nuxt module from Directus. The plugin approach requires more manual setup than a module.
• nuxt-directus is community-maintained, not an official Directus product.
• Directus is self-hosted by default, so running your own instance means managing infrastructure, backups, and upgrades.

Pricing

• Free (Open source)
• Cloud ($99/month)

Resources

• Directus docs
• Directus Nuxt guide
• nuxt-directus docs

Nuxt Content vs. external headless CMS: when to use each

Nuxt Content is a first-party Nuxt module that turns Markdown, YAML, and JSON files into a /content directory into a queryable collection of documents. It has zero external API dependencies and works across static, server, serverless, and edge deployments.

The decision really comes down to two things: who's editing your content, and how often it changes.

Use Nuxt Content if:

• Your editors are comfortable working in a Git workflow.
• Your content is mostly Markdown-based, like blog posts, docs, or changelogs.
• You want zero external API calls at build or request time.
• Content updates can go through a pull request workflow.

Use an external headless CMS if:

• Non-technical editors need to publish content without touching the codebase.
• You need a visual page builder that lets marketers assemble pages independently.
• Your content model is structured, relational, or localized in ways that are complex to represent in Markdown.
• Content updates need to happen outside of a deployment cycle.

The two aren't mutually exclusive. Many teams use Nuxt Content for developer-maintained docs and an external CMS for marketing pages.

SSR vs. SSG vs. ISR in Nuxt: how your CMS choice affects rendering

Nuxt supports three main rendering strategies, and your CMS choice directly affects how each one performs.

SSG (Static Site Generation) is the simplest. Your CMS content gets fetched once at build time, and that's it. Any CMS with an API works here, but if your content changes often, you're looking at a rebuild every time.

SSR (Server-Side Rendering) renders on every request. It’s good for frequently updated content, but every uncached page view is routed directly to your CMS API. Rate limits and response times start to matter a lot more here.

ISR (Incremental Static Regeneration) sits between the two. Pages are cached, but you can revalidate individual ones without touching the rest of the site. You set it up via Nitro route rules in nuxt.config.ts.

Recap and next steps: start building with Nuxt and Prismic

We've explored seven headless CMS platforms built for Nuxt in 2026, each with a different approach to content modeling, live preview, and editing experience, as well as varying prices.

For Nuxt teams that want the deepest integration out of the box, including a vendor-maintained module, auto-imported composables, a visual Page Builder for marketers, and a local Slice-building workflow via Slice Machine, get started with Prismic for free.

You can explore the platform at your own pace or book a demo with the product team.

FAQs