Provides guidance for Nuxt Content v3, including typed collections, database configuration, and dynamic rendering.
Install
mkdir -p .claude/skills/nuxt-content && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1833" && unzip -o skill.zip -d .claude/skills/nuxt-content && rm skill.zipInstalls to .claude/skills/nuxt-content
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when working with Nuxt Content v3, markdown content, or CMS features in Nuxt - provides collections (local/remote/API sources), queryCollection API, MDC rendering, database configuration, NuxtStudio integration, hooks, i18n patterns, and LLMs integrationKey capabilities
- →Define content collections with schemas
- →Query content collections
- →Render MDC content
- →Configure database for content
- →Integrate with NuxtStudio
- →Handle i18n multi-language content
How it works
This skill provides guidance for content-driven Nuxt applications by managing typed content collections and enabling SQL-backed queries across various content sources.
Inputs & outputs
When to use nuxt-content
- →Define a content collection with a schema
- →Query local markdown files
- →Implement MDC rendering components
- →Configure SQL-backed content sources
About this skill
Nuxt Content
Workflow
- Inspect the installed
@nuxt/contentversion,content.config.ts, matching files undercontent/, and the Nuxt surface that consumes them. The branch is understood when the collection, source glob, schema, and consumer agree. - Open the smallest matching guide below. Apply Nuxt Content guidance only to content-owned APIs; use Nuxt, Nuxt Studio, Nuxt UI, or Vue guidance when those packages own the remaining surface.
- Implement with typed collections and payload-backed Nuxt data loading. The change is complete when collection types resolve, the intended query returns the expected document shape, and the rendered route works in the target rendering mode.
Routing
| Task | Open |
|---|---|
| Collection types, schemas, indexes, local/remote sources, or locale prefixes | Collections |
| Filtering, sorting, pagination, navigation, surroundings, or search | Querying |
Markdown, MDC, ContentRenderer, prose components, or code highlighting | Rendering |
| Database adapters, markdown processing, renderer aliases, or deployment storage | Configuration |
| Hooks, transformers, custom sources, raw content, debugging, or Content v2 migration | Advanced |
| Visual editing, authentication, media, drafts, or Git publishing | nuxt-studio skill |
| Writing or restructuring documentation prose | document-writer skill |
Baseline
// content.config.ts
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { z } from 'zod'
export default defineContentConfig({
collections: {
docs: defineCollection({
type: 'page',
source: 'docs/**',
schema: z.object({
updatedAt: z.date().optional(),
}),
}),
},
})
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('docs').path(route.path).first()
})
</script>
<template>
<ContentRenderer v-if="page" :value="page" />
</template>
Use npx nuxi typecheck to verify generated collection types. When a query is empty, confirm that its collection source includes the file—especially .navigation.yml—before changing query logic.
When not to use it
- →For writing general documentation
- →For basic Nuxt tasks
- →For NuxtHub deployment
Limitations
- →Requires Nuxt Content v3
- →Not for general documentation writing
- →Not for basic Nuxt tasks
How it compares
It offers structured content management with type-safe queries and MDC rendering, unlike manual content handling in Nuxt.
Compared to similar skills
nuxt-content side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| nuxt-content (this skill) | 3 | 5mo | No flags | Intermediate |
| fullstack-developer | 0 | 5mo | Review | Advanced |
| development | 0 | 5mo | No flags | Advanced |
| dapp | 0 | 1mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by onmax
View all by onmax →You might also like
fullstack-developer
daithang59
|
development
diegosouzapw
Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.
dapp
salazarsebas
Stellar dApp / frontend development. Covers the JavaScript stellar-sdk (browser + Node.js), Freighter wallet, Stellar Wallets Kit (multi-wallet), Wallet Standard, smart accounts with passkeys, transaction building / signing / submission, Soroban contract invocation from the client, simulation, and e
nuxt
Raya46
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.
skills
xDaijobu
How to work with TLS Watch - a TLS certificate monitoring application
fumadocs-mdx-structure
TheOrcDev
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.