What is Nuxt Content?

Nuxt Content is a powerful module for Nuxt that reads markdown, YAML, CSV and JSON files in your content/ directory and exposes them through a MongoDB-like query API. It essentially turns your file system into a database.

Designed for the Nuxt ecosystem, it provides features like MDC (Markdown Components) to use Vue components inside Markdown, making it a “headless CMS” that lives in your Git repository.

Free and open-source (MIT).

Architecture and Technology

Nuxt Content parses files at build time (SSG) or runtime (SSR).

Core Features

QueryBuilder API: chainable API to filter and sort content
MDC Syntax: Use Vue components in Markdown (::alert{type="info"})
Live Edit: Edit content in the browser in dev mode
Full Text Search: Built-in search capabilities
Syntax Highlighting: Powered by Shiki

Content Model

Files act as database entries
Frontmatter for metadata
Content body for main text
Components integration via MDC

Typical Use Cases

Nuxt Content is commonly used for:

Documentation: Like the official Nuxt docs
Blogs: Developer and company blogs
Landing Pages: Content-driven marketing sites
Portfolios: structured project showcases

Strengths

Vue Integration: Use Vue components directly in content
Query Power: Sort, filter, skip, limit content easily
Development Experience: Fast hot-reload and live edit
No API: No external service dependencies
Type Safety: TypeScript support

Limitations and Trade-offs

Nuxt only: Locked into Nuxt ecosystem
Learning curve: MDC syntax takes learning
Large sites: Build times can grow with thousands of files
Visual Editor: Basic live edit, not a full visual CMS

SEO, Performance, and Content Governance

SEO

Server-side rendering ensures perfect SEO. Integration with Nuxt SEO module.

Performance

Content is parsed and optimized. JSON payload generation for client-side navigation.

Content Governance

Relies on Git workflow. Schema validation available in Content v2.

Tips and Best Practices

Use MDC components for rich interactive elements
Structure directories logically (they become routes)
Use the <ContentDoc> component for simple rendering
Implement search using the query API
Combine with Nuxt Studio for a visual editing layer

Who Should (and Should Not) Choose Nuxt Content

Best Fit For

Nuxt developers
Documentation sites
Developers wanting component-rich content
Git-centric workflows

Not Ideal For

Non-Vue developers
Teams needing a traditional WYSIWYG
Large non-technical marketing teams

Common Alternatives

Astro Content Collections: Validation-focused alternative
Docusaurus: React-based documentation
Strapi: Full Headless CMS
Storyblok: Visual Headless CMS

Nuxt Content is the ultimate tool for developers building content sites with Vue and Nuxt.