Building a Headless CMS Blog with Nuxt Content

Most businesses don't need WordPress. They need a blog that loads fast, ranks well in search engines, is easy to maintain, and doesn't require managing a separate CMS server with its own security updates and plugin ecosystem.

Nuxt Content gives you exactly that: a file-based content management system that turns markdown files into a fully rendered, SEO-optimized blog — with no database, no admin panel to hack, and no performance overhead.

What is Nuxt Content?

Nuxt Content is a module for the Nuxt framework that lets you write your website content in markdown, YAML, or JSON files. These files live directly in your project's repository, right alongside your code.

When your site builds, Nuxt Content parses these files and makes them available as queryable data. The result is a developer experience that feels like a headless CMS — with the simplicity of flat files and the performance of a static site.

Why Markdown Over a Traditional CMS

Version control: Every content change is a Git commit. You get full history, diffs, branching, and the ability to roll back any change.

No vendor lock-in: Your content is plain text files. You can move them to any system at any time.

Security: No database means no SQL injection. No admin panel means no brute-force login attacks. Your attack surface is essentially zero.

Performance: Markdown is parsed at build time, not at request time. Pages are pre-rendered HTML — as fast as it gets.

Developer experience: Content lives in the same repository as code. No API keys, no webhooks to configure, no separate deployment pipeline.

How Nuxt Content Works in Practice

Content Organization

Blog posts are markdown files stored in a content/ directory:

content/
  blog/
    my-first-post.md
    automating-workflows.md
    why-nuxt-is-great.md

Frontmatter for Metadata

Each post starts with YAML frontmatter that defines its metadata:

---
title: "Your Post Title"
description: "A short description for SEO and previews"
date: 2025-10-22
image:
  src: "https://example.com/image.jpg"
badge:
  label: "Web Development"
---

Querying Content

Nuxt Content provides a query API that lets you fetch, filter, and sort your content:

// Fetch all posts, sorted by date
const posts = await queryCollection('posts').all()

// Fetch a single post by path
const post = await queryCollection('posts').path('/blog/my-first-post').first()

Automatic Rendering

Combined with Nuxt's file-based routing, a single [slug].vue page component renders every blog post — complete with SEO meta tags, Open Graph images, and structured data.

SEO Built In

Nuxt Content gives you everything you need for search engine optimization:

• Server-side rendering means search engines receive fully rendered HTML
• Automatic sitemap generation via the Nuxt Sitemap module
• Meta tag management through useSeoMeta() composable
• Open Graph images generated dynamically with Nuxt OG Image
• Structured data (JSON-LD) for rich search results
• Internationalization support for multi-language content

When to Choose Nuxt Content

Nuxt Content is the right choice when:

• Your content is primarily text-based (blog posts, documentation, guides)
• You want maximum performance with minimum infrastructure
• Your content team is comfortable editing markdown or using a Git-based workflow
• You need multi-language support
• Security is a priority (no attack surface)

Consider a traditional headless CMS (Strapi, Sanity, Contentful) when:

• Non-technical editors need a visual interface
• You have complex content relationships (taxonomies, cross-references)
• Real-time content updates are critical (no rebuild required)
• You need granular user roles and permissions for content teams

How We Use It

This very blog is built with Nuxt Content. Every post is a markdown file in our repository, deployed automatically when we push to Git. We get full SEO optimization, multilingual support (English and German), and a blog that loads in under a second — with zero infrastructure to manage beyond our hosting.

For client projects, we often pair Nuxt Content with:

• Nuxt UI for pre-built, accessible components
• Nuxt Image for automatic image optimization
• Nuxt I18n for multilingual content
• Nuxt OG Image for dynamic social media images

This stack delivers a professional, fast, and maintainable blog or documentation site in a fraction of the time (and cost) of a traditional CMS setup.

Thinking about building a blog or docs site? Let us know — we can have you up and running faster than you'd expect.