nuxt-content

Nuxt Content facilitates content-driven application development by providing a structured, SQL-backed system for managing text and data. It moves beyond static file parsing by introducing typed collections defined in content.config.ts, allowing developers to enforce schemas on markdown, JSON, or YAML files. The framework supports remote sources like GitHub repositories and external APIs, while providing an intuitive query interface for fetching data. With native support for MDC (Markdown Components), users can integrate Vue components directly into content files. The system handles indexing, navigation generation, and database-backed storage using engines like SQLite or PostgreSQL. It acts as an abstraction layer that handles the parsing, validation, and delivery of static or dynamic content within a Nuxt application, ensuring consistent data structures across the entire frontend ecosystem.

When to Use This Skill

• •Building a documentation site with nested categories
• •Maintaining a technical blog with structured metadata and author schemas
• •Managing localized content for multilingual applications
• •Creating an interactive knowledge base with embedded UI components

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

• “How do I define a new content collection in Nuxt?
• “Show me how to query my markdown files using Nuxt Content
• “How to render custom Vue components inside markdown?
• “Setting up GitHub as a remote content source
• “How to configure SQLite for my content database?

Pro Tips

• 💡Always define clear schemas for your content collections using Zod within `defineCollection` to ensure data integrity and leverage full TypeScript type inference.
• 💡For complex queries, chain multiple `queryCollection` methods like `.where()`, `.sort()`, and `.limit()` for precise content retrieval, optimizing performance by only fetching necessary data.
• 💡Integrate `nuxt-llms` with your content workflow to dynamically generate content, summaries, or translations, significantly speeding up content creation and localization efforts.

What this skill does

• •Defines strictly typed content collections via Zod-like schemas
• •Queries content using a fluent, SQL-like API
• •Supports embedding interactive Vue components inside markdown files via MDC
• •Syncs content from remote sources like GitHub or external APIs
• •Generates automated navigation trees and search indices

When not to use it

• ✕Simple static pages that do not require structured data or search
• ✕Projects requiring heavy real-time backend database CRUD operations

Example workflow

1. Initialize Nuxt Content in a Nuxt project
2. Define a collection schema in content.config.ts
3. Place markdown files in the content directory
4. Use queryCollection in a page component to fetch data
5. Pass query results to ContentRenderer for output
6. Style the rendered output using prose classes

Prerequisites

• –Nuxt 3
• –Basic understanding of TypeScript

Pitfalls & limitations

• !Schema mismatches will break the build or query returns
• !Over-indexing large content sets can increase initial build times
• !Mixing static local files with remote sources requires careful configuration

FAQ

How it compares

Unlike manual file parsing which requires constant filesystem I/O and custom validation logic, this skill provides a pre-indexed, type-safe database layer that abstracts file system operations.

Source & trust

Recommended Rules

Recommended Workflows

Recommended MCP Servers