Nuxt Content v3

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:

• references/​collections.md - if setting up collections, schemas, or content.config.ts
• references/​querying.md - if using queryCollection, navigation, or search
• references/​rendering.md - if rendering markdown/​MDC or working with ContentRenderer
• references/​config.md - if configuring database, markdown plugins, or renderer options
• references/​studio.md - if integrating NuxtStudio or preview mode

DO NOT load all files at once. Load only what's relevant to your current task.

Key Concepts

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

• 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.