nuxt-content

Define typed Nuxt Content v3 collections with Zod schemas and queryCollection.

697|35|Updated Dec 11, 2025
One-click install
npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-content
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-content
Source: https://github.com/onmax/nuxt-skills/tree/main/skills/nuxt-content
Command: npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-content

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing and querying content in Nuxt applications, especially with complex schemas, remote sources, or database backends, can be challenging. This Skill simplifies content integration, querying, and rendering, making it easier to build dynamic, content-rich websites and documentation portals.

Core Features & Use Cases

  • Typed Collections & Schemas: Define structured content with Zod for type safety and validation, ensuring data consistency.
  • Flexible Content Sources: Integrate local Markdown files, pull content from remote GitHub repositories, or fetch from custom APIs.
  • SQL-like Querying: Use the queryCollection API for powerful, efficient content retrieval and filtering.
  • Use Case: Quickly set up a blog by defining a blog collection with a schema for posts, then query and render them using queryCollection and <ContentRenderer> for a dynamic content display.

Quick Start

I am setting up a new Nuxt Content v3 project. I need to define a new collection for blog posts with a title (string), date (date), and optional tags (array of strings). Provide the content.config.ts code.

Frequently Asked Questions about nuxt-content

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up typed collections for content management in Nuxt?

Typed collections in Nuxt Content v3 use Zod schemas to define structured content with validation. Define a collection in `content.config.ts` with a schema specifying fields like title, date, and tags, then query and render using `queryCollection` and `<ContentRenderer>` for type-safe, dynamic content display.

Can I query markdown content with SQL-like filtering in Nuxt applications?

Yes, the `queryCollection` API provides SQL-like querying for markdown and other content sources. Filter, sort, and retrieve content by schema fields without writing raw database queries, supporting local files, remote sources, and database backends.

What content sources can I integrate with Nuxt Content v3?

Nuxt Content v3 supports local markdown files, remote GitHub repositories, custom APIs, and SQL-backed databases. Define flexible data sources in your collection configuration to fetch content from any combination of these origins.

How do I render markdown with component support in Nuxt Content?

MDC (Markdown Components) and the `<ContentRenderer>` component enable rendering markdown with embedded Vue components. This allows rich, interactive content display beyond plain markdown rendering.

Does Nuxt Content v3 work with multi-language content and NuxtStudio?

Nuxt Content v3 supports i18n for multi-language content management and integrates with NuxtStudio for visual content configuration. Both are configured through content hooks and environment settings in your collection pipeline.

Can I use Nuxt Content with LLM integrations for dynamic content?

Nuxt Content v3 supports LLM integrations through configurable hooks and pipelines. Extend content processing workflows to incorporate AI-generated or AI-enhanced content within your typed collection schemas.