nuxt-content

name: nuxt-content description: Build content-driven Nuxt applications with git-based CMS. Use when creating blogs, documentation sites, portfolios, or any content-heavy website. Triggers on requests involving: Markdown content, MDC syntax, content collections, blog posts, documentation, YAML/JSON data files, content querying, or when user mentions "Nuxt Content".

Nuxt Content Development

Nuxt Content is a git-based CMS for Nuxt that lets you write content in Markdown, YAML, JSON or CSV and query it in your application.

Quick Reference

Documentation: https://content.nuxt.com Full Docs (for LLM): https://content.nuxt.com/llms-full.txt

Installation

npx nuxi module add content

Core Concepts

1. Collections: Define content types with schemas
2. MDC Syntax: Use Vue components in Markdown
3. Query API: Fetch and filter content
4. Type-safe: Full TypeScript support with Zod validation

Project Structure

content/
├── blog/
│   ├── first-post.md
│   └── second-post.md
├── docs/
│   ├── getting-started.md
│   └── configuration.md
└── data.yml

Defining Collections

Create content.config.ts in project root:

import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/**/*.md',
      schema: z.object({
        title: z.string(),
        description: z.string(),
        date: z.date(),
        image: z.string().optional(),
        tags: z.array(z.string()).optional()
      })
    }),
    docs: defineCollection({
      type: 'page',
      source: 'docs/**/*.md',
      schema: z.object({
        title: z.string(),
        description: z.string()
      })
    }),
    data: defineCollection({
      type: 'data',
      source: '*.yml',
      schema: z.object({
        name: z.string(),
        items: z.array(z.string())
      })
    })
  }
})

Collection Types

File Formats

Markdown (.md)

---
title: My Post
date: 2025-01-15
tags: [nuxt, vue]
---

# Introduction

Content here with **MDC syntax**.

::MyComponent{prop="value"}
Slot content
::

YAML (.yml)

name: Site Config
items:
  - Item 1
  - Item 2

JSON (.json)

{
  "name": "Data",
  "items": ["a", "b", "c"]
}

Query API

queryCollection

// Get all posts
const posts = await queryCollection('blog').all()

// Get single post by path
const post = await queryCollection('blog')
  .path('/blog/first-post')
  .first()

// Filter and sort
const recentPosts = await queryCollection('blog')
  .where('date', '>', new Date('2025-01-01'))
  .order('date', 'DESC')
  .limit(5)
  .all()

// Select specific fields
const titles = await queryCollection('blog')
  .select('title', 'date')
  .all()

Query Methods

Navigation Query

// Generate navigation tree
const navigation = await queryCollectionNavigation('docs')

// Get surrounding pages (prev/next)
const { prev, next } = await queryCollectionItemSurroundings(
  'docs',
  '/docs/getting-started'
)

Rendering Content

ContentRenderer Component

<script setup>
const post = await queryCollection('blog')
  .path('/blog/first-post')
  .first()
</script>

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

Dynamic Routes

<!-- pages/blog/[...slug].vue -->
<script setup>
const route = useRoute()
const post = await queryCollection('blog')
  .path(route.path)
  .first()

if (!post) {
  throw createError({ statusCode: 404, message: 'Post not found' })
}
</script>

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

MDC Syntax (Markdown Components)

Block Components

::Alert{type="warning"}
This is a warning message.
::

::Card
  ::CardHeader
  Title here
  ::
  ::CardBody
  Content here
  ::
::

Inline Components

This is :badge[New]{color="green"} inline component.

Props and Slots

::Hero{title="Welcome" background="/hero.jpg"}
#description
This is the description slot.

#actions
- [Get Started](/docs)
- [Learn More](/about)
::

Prose Components

Override default Markdown rendering:

<!-- components/content/ProseH1.vue -->
<template>
  <h1 class="text-4xl font-bold text-primary">
    <slot />
  </h1>
</template>

Available prose components: ProseA, ProseBlockquote, ProseCode, ProseEm, ProseH1-ProseH6, ProseHr, ProseImg, ProseLi, ProseOl, ProseP, ProsePre, ProseStrong, ProseTable, ProseTbody, ProseTd, ProseTh, ProseThead, ProseTr, ProseUl

Common Patterns

Blog List Page

<!-- pages/blog/index.vue -->
<script setup>
const posts = await queryCollection('blog')
  .order('date', 'DESC')
  .all()
</script>

<template>
  <div>
    <h1>Blog</h1>
    <ul>
      <li v-for="post in posts" :key="post._path">
        <NuxtLink :to="post._path">
          <h2>{{ post.title }}</h2>
          <p>{{ post.description }}</p>
          <time>{{ post.date }}</time>
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

Documentation with Navigation

<!-- layouts/docs.vue -->
<script setup>
const navigation = await queryCollectionNavigation('docs')
</script>

<template>
  <div class="flex">
    <aside>
      <nav>
        <ul>
          <li v-for="item in navigation" :key="item._path">
            <NuxtLink :to="item._path">{{ item.title }}</NuxtLink>
          </li>
        </ul>
      </nav>
    </aside>
    <main>
      <slot />
    </main>
  </div>
</template>

Prev/Next Navigation

<script setup>
const route = useRoute()
const { prev, next } = await queryCollectionItemSurroundings(
  'docs',
  route.path
)
</script>

<template>
  <nav class="flex justify-between">
    <NuxtLink v-if="prev" :to="prev._path">
      ← {{ prev.title }}
    </NuxtLink>
    <NuxtLink v-if="next" :to="next._path">
      {{ next.title }} →
    </NuxtLink>
  </nav>
</template>

Deployment

Nuxt UI Integration

Nuxt Content works seamlessly with Nuxt UI components:

::UAlert{color="primary" title="Note"}
This uses Nuxt UI's Alert component.
::

::UCard
Content inside a Nuxt UI Card.
::

Best Practices

1. Define schemas - Always use Zod schemas for type safety
2. Use collections - Group related content logically
3. MDC for interactivity - Embed Vue components in Markdown
4. Static generation - Use nuxt generate for best performance
5. Prose overrides - Customize Markdown rendering via prose components
6. Path-based routing - Use [...slug].vue for content pages