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
Loading Files
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
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 |
Quick Start
// content.config.ts
import { defineCollection, defineContentConfig, z } from '@nuxt/content'
export default defineContentConfig({
collections: {
blog: defineCollection({
type: 'page',
source: 'blog/**',
schema: z.object({
title: z.string(),
date: z.date(),
}),
}),
},
})
<!-- pages/blog/[...slug].vue -->
<script setup lang="ts">
const { data: page } = await useAsyncData(
() => queryCollection('blog').path(useRoute().path).first()
)
</script>
<template>
<ContentRenderer v-if="page" :value="page" />
</template>
Verify setup: Run npx nuxi typecheck to confirm collection types resolve. If queryCollection returns empty, check that content files exist in the path matching your source glob.
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, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integration4license: MIT5---6
7# Nuxt Content v3
8
9Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.
10
11## When to Use
12
13Working with:
14
15- 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 content
22- NuxtStudio or preview mode
23- LLMs integration (`nuxt-llms`)
24
25**For writing documentation:** use `document-writer` skill
26**For Nuxt basics:** use `nuxt` skill
27**For NuxtHub deployment:** use `nuxthub` skill (NuxtHub v1 compatible)
28
29## Available Guidance
30
31Read specific files based on current work:
32
33- **[references/collections.md](references/collections.md)** - defineCollection, schemas, sources, content.config.ts
34- **[references/querying.md](references/querying.md)** - queryCollection, navigation, search, surroundings
35- **[references/rendering.md](references/rendering.md)** - ContentRenderer, MDC syntax, prose components, Shiki
36- **[references/config.md](references/config.md)** - Database setup, markdown plugins, renderer options
37- **[references/studio.md](references/studio.md)** - NuxtStudio integration, preview mode, live editing
38
39## Loading Files
40
41**Consider loading these reference files based on your task:**
42
43- [ ] [references/collections.md](references/collections.md) - if setting up collections, schemas, or content.config.ts
44- [ ] [references/querying.md](references/querying.md) - if using queryCollection, navigation, or search
45- [ ] [references/rendering.md](references/rendering.md) - if rendering markdown/MDC or working with ContentRenderer
46- [ ] [references/config.md](references/config.md) - if configuring database, markdown plugins, or renderer options
47- [ ] [references/studio.md](references/studio.md) - if integrating NuxtStudio or preview mode
48
49**DO NOT load all files at once.** Load only what's relevant to your current task.
50
51## Key Concepts
52
53| Concept | Purpose |
54| --------------- | ----------------------------------------------------------------- |
55| Collections | Typed content groups with schemas |
56| Page vs Data | `page` = routes + body, `data` = structured data only |
57| Remote sources | `source.repository` for GitHub, `defineCollectionSource` for APIs |
58| queryCollection | SQL-like fluent API for content |
59| MDC | Vue components inside markdown |
60| ContentRenderer | Renders parsed markdown body |
61
62## Quick Start
63
64```ts
65// content.config.ts
66import { defineCollection, defineContentConfig, z } from '@nuxt/content'
67
68export default defineContentConfig({
69 collections: {
70 blog: defineCollection({
71 type: 'page',
72 source: 'blog/**',
73 schema: z.object({
74 title: z.string(),
75 date: z.date(),
76 }),
77 }),
78 },
79})
80```
81
82```vue
83<!-- pages/blog/[...slug].vue -->
84<script setup lang="ts">
85const { data: page } = await useAsyncData(
86 () => queryCollection('blog').path(useRoute().path).first()
87)
88</script>
89
90<template>
91 <ContentRenderer v-if="page" :value="page" />
92</template>
93```
94
95**Verify setup:** Run `npx nuxi typecheck` to confirm collection types resolve. If `queryCollection` returns empty, check that content files exist in the path matching your `source` glob.
96
97## Directory Structure
98
99```
100project/
101├── content/ # Content files
102│ ├── blog/ # Maps to 'blog' collection
103│ └── .navigation.yml # Navigation metadata
104├── components/content/ # MDC components
105└── content.config.ts # Collection definitions
106```
107
108## Official Documentation
109
110- Nuxt Content: https://content.nuxt.com
111- MDC syntax: https://content.nuxt.com/docs/files/markdown#mdc-syntax
112- Collections: https://content.nuxt.com/docs/collections/collections
113
114## Token Efficiency
115
116Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.
om-scogo