nuxt-content_skill

Overview

This skill helps developers integrate and work with Nuxt Content v3 in Nuxt apps. It provides focused guidance for defining typed collections, querying content (including SQL-like queryCollection), rendering MDC/markdown with ContentRenderer, and configuring database backends and remote sources. Use it to implement navigation, i18n content patterns, NuxtStudio preview workflows, and LLM integrations with content.

How this skill works

The skill inspects your current task context and recommends the single reference file you need (collections, querying, rendering, config, or studio). It explains collection schemas, remote sources, queryCollection patterns, MDC component rendering, and database options like SQLite, Postgres, D1, and LibSQL. It also highlights relevant hooks, NuxtStudio integration steps, and common i18n or LLM integration patterns.

When to use it

• Defining or updating content collections and schemas in content.config.ts
• Implementing content queries, navigation, or search with queryCollection
• Rendering markdown/MDC or customizing prose components and syntax highlighting
• Configuring a content database backend or markdown plugins
• Connecting remote content sources (GitHub, external APIs) or using preview/NuxtStudio
• Integrating content with LLM workflows or multilingual content setups

Best practices

• Load only the specific reference file relevant to your task (collections, querying, rendering, config, or studio) to stay focused and token-efficient
• Prefer typed collections and JSON schema for predictable queries and editor autocompletion
• Use queryCollection’s fluent/SQL-like API for paginated, ordered, and filtered queries; test queries against sample data
• Use ContentRenderer and MDC components for rich, interactive markdown UIs and isolate prose components in components/content/
• Configure a proper database backend for production (Postgres/LibSQL/D1) and use SQLite for local development
• Use content hooks (beforeParse/afterParse) for content transformations and NuxtStudio preview for editing workflows

Example use cases

• Create a blog collection with typed frontmatter, local markdown files, and author references
• Add a remote GitHub repository as a collection source and sync external docs via defineCollectionSource
• Build a site search and navigation using queryCollection with full-text and surrounding context
• Render MDC pages with custom prose components and Shiki syntax highlighting in ContentRenderer
• Switch content DB from SQLite to Postgres for production and configure migrations and connection options
• Enable preview editing in NuxtStudio and wire content changes into an LLM-assisted documentation generator