nuxt-content

Nuxt Content v3

Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.

When to Use

Working with:

• Content collections (content.config.ts, defineCollection)
• Remote sources (GitHub repos, external APIs via defineCollectionSource)
• Content queries (queryCollection, navigation, search)
• MDC rendering (<ContentRenderer>, prose components)
• Database configuration (SQLite, PostgreSQL, D1, LibSQL)
• Content hooks (content:file:beforeParse, content:file:afterParse)
• i18n multi-language content
• NuxtStudio or preview mode
• LLMs integration (nuxt-llms)

For writing documentation: use document-writer skill For Nuxt basics: use nuxt skill For NuxtHub deployment: use nuxthub skill (NuxtHub v1 compatible)

Available Guidance

Read specific files based on current work:

• references/collections.md - defineCollection, schemas, sources, content.config.ts
• references/querying.md - queryCollection, navigation, search, surroundings
• references/rendering.md - ContentRenderer, MDC syntax, prose components, Shiki
• references/config.md - Database setup, markdown plugins, renderer options
• references/studio.md - NuxtStudio integration, preview mode, live editing

Usage Pattern

Progressive loading - only read what you need:

• Setting up collections? → references/collections.md
• Querying content? → references/querying.md
• Rendering markdown/MDC? → references/rendering.md
• Configuring database/markdown? → references/config.md
• Using NuxtStudio? → references/studio.md

DO NOT read all files at once. Load based on context:

• Editing content.config.ts → read collections.md
• Using queryCollection() → read querying.md
• Working with <ContentRenderer> or MDC → read rendering.md
• Configuring database or markdown → read config.md
• Setting up preview/studio → read studio.md

Key Concepts

Concept	Purpose
Collections	Typed content groups with schemas
Page vs Data	page = routes + body, data = structured data only
Remote sources	source.repository for GitHub, defineCollectionSource for APIs
queryCollection	SQL-like fluent API for content
MDC	Vue components inside markdown
ContentRenderer	Renders parsed markdown body

Directory Structure

project/
├── content/                    # Content files
│   ├── blog/                   # Maps to 'blog' collection
│   └── .navigation.yml         # Navigation metadata
├── components/content/         # MDC components
└── content.config.ts           # Collection definitions

Official Documentation

• Nuxt Content: https://content.nuxt.com
• MDC syntax: https://content.nuxt.com/docs/files/markdown#mdc-syntax
• Collections: https://content.nuxt.com/docs/collections/collections

Token Efficiency

Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.