onmax

nuxt-content

440
15
# Install this skill:
npx skills add onmax/nuxt-skills --skill "nuxt-content"

Install specific skill from multi-skill repository

# 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

# SKILL.md


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:

Usage Pattern

Progressive loading - only read what you need:

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.

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.