nuxt-content

SKILL.md

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

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

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.