Nuxt Content Module for Markdown-Driven Sites

The Nuxt Content module turns a folder of markdown files into a queryable database. Here's a practical setup for a blog, docs, or content-heavy marketing site.

Richard GamoraRichard GamoraFullstack developer·4 min read
NuxtContentMarkdown

If you are building a blog, documentation site, or marketing site with a lot of written content, the Nuxt Content module is the most pleasant way to manage it. You write markdown files, it does the routing, querying, and rendering for you.

What it gives you

Drop markdown files in /content, and Nuxt Content turns each one into a queryable record. Frontmatter at the top of each file becomes searchable metadata. The content is parsed into a tree that you can render with <ContentDoc> or <ContentRenderer>, with full control over how each markdown element appears.

Querying

queryContent() is the workhorse. queryContent('/blog').sort({ date: -1 }).limit(10).find() gives you the latest 10 posts. The query API is composable — filters, sorts, projections, and joins all work on the markdown collection like a small database.

Custom components in markdown

Nuxt Content lets you use Vue components directly in markdown. Define a <Callout> component, then write `::callout\n...\n::` in any post. The renderer handles the rest. This is how most documentation sites embed live examples, charts, or interactive widgets.

When it stops fitting

Nuxt Content works well up to several hundred markdown files. Past that, the query layer slows down because it loads everything in memory. For larger collections, switch to a real CMS (or a database) and use the API patterns instead. For most personal sites and docs, you will never hit that ceiling.

About the author

Richard Gamora

Richard Gamora

Fullstack developer based in the Philippines, working mostly with Laravel and Vue.js, with eight years of production experience across web and mobile.

me@richardgamora.comUpwork ↗

More on Vue & Nuxt