The Complete Production SOP: How to Deploy and Run Nuxt Content v2 Git-Based Markdown CMS & MDC Syntax in Autonomous AI Agents

---
name: "nuxt-content-markdown-cms"
description: "Transform Markdown and MDC components into a full-featured searchable content site."
metadata:
  author: "Nuxt"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "querycontent nuxt content"
  - "mdc vue component markdown"
  - "nuxt content documentation"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {
    highlight: {
      theme: {
        default: 'github-light',
        dark: 'github-dark'
      },
      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'bash']
    }
  }
})

<script setup lang="ts">
defineProps<{
  type?: 'info' | 'warning' | 'danger'
}>()
</script>

<template>
  <div :class="['callout-box', `callout-${type || 'info'}`]">
    <slot />
  </div>
</template>

<style scoped>
.callout-box {
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}
.callout-info { background: #e0f2fe; border-left: 4px solid #0284c7; }
.callout-warning { background: #fef3c7; border-left: 4px solid #d97706; }
.callout-danger { background: #fee2e2; border-left: 4px solid #dc2626; }
</style>

<script setup lang="ts">
const route = useRoute()
const { data: post, error } = await useAsyncData(`blog-${route.path}`, () => {
  return queryContent('blog', route.params.slug as string).findOne()
})

if (error.value || !post.value) {
  throw createError({ statusCode: 404, statusMessage: 'Post Not Found', fatal: true })
}
</script>

<template>
  <main class="prose mx-auto py-10">
    <h1>{{ post.title }}</h1>
    <ContentRenderer :value="post">
      <template #empty>
        <p>No content found in this document.</p>
      </template>
    </ContentRenderer>
  </main>
</template>