@nuxt/content — File-Based CMS

@nuxt/content lets you write content as markdown, YAML, or JSON files and query them with a Mongo-like API, perfect for docs sites and blogs.

4 min read Level 2/5 #nuxt#content#cms

What you'll learn

Install @nuxt/content and create files under the content directory
Query documents with queryContent
Render the result with ContentDoc or ContentRenderer

@nuxt/content turns a folder of markdown files into a queryable, typed content database. It’s the engine behind countless docs sites — including many of the Nuxt project’s own.

Install

npx nuxi module add @nuxt/content

Author Content

Drop a markdown file under content/:

---
title: Hello Nuxt
description: My first post
---

# Hello

Welcome to my **blog**.

Frontmatter becomes structured metadata. The body is parsed into a tree of components.

Query It

<script setup lang="ts">
const route = useRoute()
const { data: post } = await useAsyncData(`post-${route.path}`, () =>
  queryContent(route.path).findOne(),
)
</script>

queryContent supports .where(), .sort(), .limit(), and .find() for lists.

Render It

The simplest path is <ContentDoc>, which queries and renders the current route:

<template>
  <ContentDoc />
</template>

For custom layouts around the rendered body, fetch yourself and use <ContentRenderer>:

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <ContentRenderer :value="post" />
  </article>
</template>

MDC: Markdown + Components

Content files can use Vue components inline (MDC syntax):

::alert{type="info"}
This is a Vue component rendered from markdown.
::

That maps to <Alert type="info"> in your components folder.

@nuxtjs/i18n — Internationalization →