From nuxt-skills
Guides Nuxt Content v3 for markdown/CMS features: collections (local/remote/API), queryCollection API, MDC rendering, database config (SQLite/PostgreSQL/D1/LibSQL), hooks, i18n, NuxtStudio, LLMs.
npx claudepluginhub onmax/nuxt-skills --plugin nuxt-skillsThis skill uses the workspace's default tool permissions.
Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Progressive guidance for content-driven Nuxt apps with typed collections and SQL-backed queries.
Working with:
content.config.ts, defineCollection)defineCollectionSource)queryCollection, navigation, search)<ContentRenderer>, prose components)content:file:beforeParse, content:file:afterParse)nuxt-llms)For writing documentation: use document-writer skill
For Nuxt basics: use nuxt skill
For NuxtHub deployment: use nuxthub skill (NuxtHub v1 compatible)
Read specific files based on current work:
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.
| 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 |
// 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.
project/
├── content/ # Content files
│ ├── blog/ # Maps to 'blog' collection
│ └── .navigation.yml # Navigation metadata
├── components/content/ # MDC components
└── content.config.ts # Collection definitions
Main skill: ~300 tokens. Each sub-file: ~800-1200 tokens. Only load files relevant to current task.