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
Token Efficiency
Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
1---2name: nuxt-content3description: Use when working with Nuxt Content v3 - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration4license: MIT5---67# Nuxt Content v389Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.1011## When to Use1213Working with:1415- Content collections (`content.config.ts`, `defineCollection`)16- Remote sources (GitHub repos, external APIs via `defineCollectionSource`)17- Content queries (`queryCollection`, navigation, search)18- MDC rendering (`<ContentRenderer>`, prose components)19- Database configuration (SQLite, PostgreSQL, D1, LibSQL)20- Content hooks (`content:file:beforeParse`, `content:file:afterParse`)21- i18n multi-language content22- NuxtStudio or preview mode23- LLMs integration (`nuxt-llms`)2425**For writing documentation:** use `document-writer` skill26**For Nuxt basics:** use `nuxt` skill27**For NuxtHub deployment:** use `nuxthub` skill (NuxtHub v1 compatible)2829## Available Guidance3031Read specific files based on current work:3233- **[references/collections.md](references/collections.md)** - defineCollection, schemas, sources, content.config.ts34- **[references/querying.md](references/querying.md)** - queryCollection, navigation, search, surroundings35- **[references/rendering.md](references/rendering.md)** - ContentRenderer, MDC syntax, prose components, Shiki36- **[references/config.md](references/config.md)** - Database setup, markdown plugins, renderer options37- **[references/studio.md](references/studio.md)** - NuxtStudio integration, preview mode, live editing3839## Usage Pattern4041**Progressive loading - only read what you need:**4243- Setting up collections? → [references/collections.md](references/collections.md)44- Querying content? → [references/querying.md](references/querying.md)45- Rendering markdown/MDC? → [references/rendering.md](references/rendering.md)46- Configuring database/markdown? → [references/config.md](references/config.md)47- Using NuxtStudio? → [references/studio.md](references/studio.md)4849**DO NOT read all files at once.** Load based on context:5051- Editing `content.config.ts` → read collections.md52- Using `queryCollection()` → read querying.md53- Working with `<ContentRenderer>` or MDC → read rendering.md54- Configuring database or markdown → read config.md55- Setting up preview/studio → read studio.md5657## Key Concepts5859| Concept | Purpose |60| --------------- | ----------------------------------------------------------------- |61| Collections | Typed content groups with schemas |62| Page vs Data | `page` = routes + body, `data` = structured data only |63| Remote sources | `source.repository` for GitHub, `defineCollectionSource` for APIs |64| queryCollection | SQL-like fluent API for content |65| MDC | Vue components inside markdown |66| ContentRenderer | Renders parsed markdown body |6768## Directory Structure6970```71project/72├── content/ # Content files73│ ├── blog/ # Maps to 'blog' collection74│ └── .navigation.yml # Navigation metadata75├── components/content/ # MDC components76└── content.config.ts # Collection definitions77```7879## Official Documentation8081- Nuxt Content: https://content.nuxt.com82- MDC syntax: https://content.nuxt.com/docs/files/markdown#mdc-syntax83- Collections: https://content.nuxt.com/docs/collections/collections8485## Token Efficiency8687Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
chonsong