skills.rest
incubrain
incubrainOFFICIAL
Explore all skills by this author →
Website𝕏@DrewMacGibbonGitHub

nuxt-content

Build content-driven Nuxt apps with Nuxt Content v3 typed collections.

78|8|Updated Nov 7, 2022
Search Tags:#i18n#mdc#nuxt#content-collections#nuxt-content#queryCollection#nuxtstudio
One-click install
npx skills add https://github.com/incubrain/foundry --skill nuxt-content-incubrain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-content
Source: https://github.com/incubrain/foundry/tree/main/.claude/skills/nuxt-content
Command: npx skills add https://github.com/incubrain/foundry --skill nuxt-content-incubrain

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires , and includes references (resource) components.

What problem does it solve?

This Skill provides progressive guidance for building content-driven Nuxt apps using Nuxt Content v3, including typed collections, remote sources, content queries, MDC rendering, and Studio integration. It helps teams standardize content workflows and accelerate delivery.

Core Features & Use Cases

  • Typed content collections via content.config.ts and defineCollection to enforce schemas across data and pages.
  • Remote and multi-source content ingestion via defineCollectionSource and external repositories.
  • SQL-like content queries with queryCollection, navigation, and search to power dynamic UIs.
  • MDC rendering and Prose components for rich markdown content in Nuxt apps.
  • NuxtStudio integration for live editing, preview, and Git-based workflows.
  • i18n support and multi-language content workflows.
  • Use with Nuxt basics and for deployment patterns (nuxthub, previews).

Quick Start

  • Install a Nuxt project configured with @nuxt/content and add a content/ directory with collections.
  • Define a few example collections (e.g., blog, authors) and query them with queryCollection.
  • Enable NuxtStudio/preview mode for live editing and preview.

Frequently Asked Questions about nuxt-content

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

FAQPage Schema
How do I define typed content collections in Nuxt Content v3?▼

You define typed content collections by using the content.config.ts file and the defineCollection function to enforce schemas across data and pages. This approach ensures type safety for your markdown and structured data within your Nuxt app.

What is the best way to query content in Nuxt Content v3?▼

The best way to query content is using the queryCollection function for SQL-like queries, navigation, and search to power dynamic UIs. This allows precise filtering and retrieval of content from your defined collections.

How do I render MDC components in a Nuxt app?▼

MDC components are rendered using MDC rendering and Prose components for rich markdown content in Nuxt apps. This allows you to embed Vue components directly within your markdown files for dynamic content.

Can I use NuxtStudio for live editing with Nuxt Content?▼

Yes, NuxtStudio integration is supported for live editing, preview, and Git-based workflows. This enables content teams to visually edit and preview content changes before deployment.

Does Nuxt Content v3 support remote content sources?▼

Yes, Nuxt Content v3 supports remote and multi-source content ingestion via the defineCollectionSource function and external repositories. This allows you to pull content from external Git repositories or APIs.

How do I handle i18n and multi-language content in a Nuxt app?▼

i18n support and multi-language content workflows are handled natively within Nuxt Content v3. This allows you to manage translations and serve localized content dynamically based on user preferences.

Related Skills

Explore More Software Engineering Skills→
dnsnamdangdnsnamdang

playwright-setup

Automate Playwright E2E test setup and execution for Nuxt projects.

Community
Intermediate
vito1317vito1317

nuxthub

Consolidate database, KV, blob, and cache management for NuxtHub apps.

Community
Advanced
KurrawongKurrawong
1

nuxt-content

Configure Nuxt Content v3 collections, queries, and markdown rendering.

Official
Advanced
robotostudiorobotostudio
172

content-modeling-best-practices

Guide structured content modeling and schema design for headless CMS platforms.

Official
Intermediate