playbooks

home / skills / onmax / nuxt-skills / nuxt-content

nuxt-content skill

/skills/nuxt-content

This skill helps you work with Nuxt Content v3 by guiding collections querying rendering and database setup for content-driven apps.

npx playbooks add skill onmax/nuxt-skills --skill nuxt-content

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
3.8 KB
---
name: nuxt-content
description: 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 integration
license: MIT
---

# 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](references/collections.md)** - defineCollection, schemas, sources, content.config.ts
- **[references/querying.md](references/querying.md)** - queryCollection, navigation, search, surroundings
- **[references/rendering.md](references/rendering.md)** - ContentRenderer, MDC syntax, prose components, Shiki
- **[references/config.md](references/config.md)** - Database setup, markdown plugins, renderer options
- **[references/studio.md](references/studio.md)** - NuxtStudio integration, preview mode, live editing

## Usage Pattern

**Progressive loading - only read what you need:**

- Setting up collections? → [references/collections.md](references/collections.md)
- Querying content? → [references/querying.md](references/querying.md)
- Rendering markdown/MDC? → [references/rendering.md](references/rendering.md)
- Configuring database/markdown? → [references/config.md](references/config.md)
- Using NuxtStudio? → [references/studio.md](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.

Overview

This skill helps developers integrate and work with Nuxt Content v3 in Nuxt apps. It provides focused guidance for defining typed collections, querying content (including SQL-like queryCollection), rendering MDC/markdown with ContentRenderer, and configuring database backends and remote sources. Use it to implement navigation, i18n content patterns, NuxtStudio preview workflows, and LLM integrations with content.

How this skill works

The skill inspects your current task context and recommends the single reference file you need (collections, querying, rendering, config, or studio). It explains collection schemas, remote sources, queryCollection patterns, MDC component rendering, and database options like SQLite, Postgres, D1, and LibSQL. It also highlights relevant hooks, NuxtStudio integration steps, and common i18n or LLM integration patterns.

When to use it

  • Defining or updating content collections and schemas in content.config.ts
  • Implementing content queries, navigation, or search with queryCollection
  • Rendering markdown/MDC or customizing prose components and syntax highlighting
  • Configuring a content database backend or markdown plugins
  • Connecting remote content sources (GitHub, external APIs) or using preview/NuxtStudio
  • Integrating content with LLM workflows or multilingual content setups

Best practices

  • Load only the specific reference file relevant to your task (collections, querying, rendering, config, or studio) to stay focused and token-efficient
  • Prefer typed collections and JSON schema for predictable queries and editor autocompletion
  • Use queryCollection’s fluent/SQL-like API for paginated, ordered, and filtered queries; test queries against sample data
  • Use ContentRenderer and MDC components for rich, interactive markdown UIs and isolate prose components in components/content/
  • Configure a proper database backend for production (Postgres/LibSQL/D1) and use SQLite for local development
  • Use content hooks (beforeParse/afterParse) for content transformations and NuxtStudio preview for editing workflows

Example use cases

  • Create a blog collection with typed frontmatter, local markdown files, and author references
  • Add a remote GitHub repository as a collection source and sync external docs via defineCollectionSource
  • Build a site search and navigation using queryCollection with full-text and surrounding context
  • Render MDC pages with custom prose components and Shiki syntax highlighting in ContentRenderer
  • Switch content DB from SQLite to Postgres for production and configure migrations and connection options
  • Enable preview editing in NuxtStudio and wire content changes into an LLM-assisted documentation generator

FAQ

Which reference should I open to add a new collection?

Open the collections reference for content.config.ts, defineCollection patterns, schemas, and remote source examples.

When should I configure a SQL backend instead of SQLite?

Use SQLite for local/dev. Choose Postgres, LibSQL, or D1 for production when you need concurrent writes, scaling, backups, and managed hosting.