nuxt-content

Configures Nuxt Content v3 workflows for typed collections, SQL-backed querying, and markdown rendering.

Updated Apr 30, 2026
One-click install
npx skills add https://github.com/Guibibi/budgetpulse --skill nuxt-content-guibibi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nuxt-content
Source: https://github.com/Guibibi/budgetpulse/tree/main/.agents/skills/nuxt-content
Command: npx skills add https://github.com/Guibibi/budgetpulse --skill nuxt-content-guibibi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design, query, render, and manage content-driven Nuxt applications without piecing together Nuxt Content patterns from scratch. It reduces confusion around collections, content queries, markdown rendering, and preview workflows so you can ship structured content features faster.

Core Features & Use Cases

  • Content Collections: Define typed page and data collections with schemas and source patterns for local or remote content.
  • Query and Navigation: Use queryCollection, navigation trees, search sections, and prev/next lookups to power content browsing.
  • Rendering and Styling: Render markdown and MDC with ContentRenderer, custom prose components, and Shiki code highlighting.
  • Studio and Preview: Configure NuxtStudio, live editing, and preview mode for editorial workflows.
  • Use Case: Build a documentation site with typed markdown pages, hierarchical navigation, code examples, and a previewable editing experience.

Quick Start

Use the nuxt-content skill to set up a typed Nuxt Content collection, query it in a page, and render the result with ContentRenderer.

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 markdown content in Nuxt?

Nuxt Content allows you to define typed page and data collections using schemas and source patterns. This approach enables SQL-backed querying and structured markdown rendering for documentation sites, blogs, and multilingual content systems.

What is the best way to render markdown and MDC components in a Nuxt application?

Use the ContentRenderer component to render markdown and MDC components in Nuxt. It supports custom prose components and Shiki code highlighting, enabling flexible markdown rendering for documentation sites and blogs.

How does queryCollection work for building navigation trees in Nuxt Content?

The queryCollection API retrieves typed collection data using SQL-backed querying to build navigation trees, search sections, and prev/next lookups. It powers content browsing for documentation sites and multilingual content systems.

Can I configure a live preview mode and editorial workflow with NuxtStudio?

Yes, Nuxt Content supports configuring NuxtStudio, live editing, and preview mode for editorial workflows. This enables a previewable editing experience for managing typed markdown collections and content features.

Does Nuxt Content support remote sources and multilingual content systems?

Yes, Nuxt Content supports remote sources and multilingual content systems through typed collection schemas. You can define source patterns for local or remote content to build internationalized documentation and blogs.