nuxt-content

onmax/nuxt-skills

Build typed, content-driven Nuxt applications with collections, queries, and Markdown rendering.

What is nuxt-content?

@nuxt/content skill for Nuxt developers building content-heavy sites. Use it when working with content.config.ts, collections, queryCollection, Markdown/MDC rendering, content databases, hooks, custom sources, search, or migrating from Content v2.

Define typed collections with schemas and multiple content sources
Query collections with filtering, sorting, pagination, and search
Render Markdown and MDC with prose components and code highlighting
Configure database adapters, markdown processors, and deployment storage
Implement hooks, transformers, and custom content sources
Migrate from Nuxt Content v2 to the current version

How to install nuxt-content

npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-content

Prerequisites

@nuxt/content installed in a Nuxt project
content.config.ts configuration file
Nuxt 3.x environment

Claude Code

Cursor

Windsurf

Cline

How to use nuxt-content

1.Inspect the installed @nuxt/content version and content.config.ts file
2.Define collections with schemas using defineCollection and Zod validation
3.Query collections using queryCollection with path, filtering, and sorting
4.Use ContentRenderer component to render Markdown and MDC content
5.Run npx nuxi typecheck to verify generated collection types
6.Test queries to confirm collection sources include all files

Use cases

Good for

Building documentation sites with typed Markdown collections and search
Creating blog platforms with queryable posts, tags, and pagination
Implementing multi-language content with locale-prefixed collections
Setting up custom content sources beyond local files
Rendering rich media content with MDC components and prose customization

Who it's for

Nuxt developers building content-driven applications
Documentation site maintainers
Blog and CMS platform builders
Teams migrating from Nuxt Content v2

nuxt-content FAQ

When should I use this skill vs. nuxt-studio?

Use nuxt-content for programmatic collection setup, querying, and rendering. Use nuxt-studio for visual editing, authentication, media management, drafts, and Git publishing.

How do I debug an empty query result?

Confirm that the collection source glob includes the file you're querying, especially .navigation.yml files. Check content.config.ts source patterns match your file structure.

Can I use custom content sources beyond local files?

Yes, the Advanced guide covers database adapters, custom sources, and raw content access through hooks and transformers.

How do I migrate from Nuxt Content v2?

The Advanced guide includes Content v2 migration guidance. Key changes involve collection definitions, query syntax, and renderer configuration.

What rendering options are available?

ContentRenderer supports Markdown, MDC, prose components, and code highlighting. Configure markdown processors and renderer aliases in content.config.ts.

Full instructions (SKILL.md)

Source of truth, from onmax/nuxt-skills.

name: nuxt-content description: Build typed, content-driven Nuxt applications with @nuxt/content. Use when working with content.config.ts, collections, queryCollection, Markdown or MDC rendering, content databases, hooks, custom sources, search, or Content v2 migrations. license: MIT

Nuxt Content

Workflow

Inspect the installed @nuxt/content version, content.config.ts, matching files under content/, 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.