skills.rest
fawzymohamed
fawzymohamedCOMMUNITY
Explore all skills by this author →
GitHub

nuxt-content

Manage Markdown content and frontmatter in Nuxt 4 apps with ContentRenderer.

1|Updated Dec 30, 2025
Search Tags:#documentation#markdown#frontmatter#nuxt#nuxt-content#content-renderer#queryContent
One-click install
npx skills add https://github.com/fawzymohamed/devops --skill nuxt-content-fawzymohamed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-content
Source: https://github.com/fawzymohamed/devops/tree/main/.claude/skills/nuxt-content
Command: npx skills add https://github.com/fawzymohamed/devops --skill nuxt-content-fawzymohamed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nuxt Content streamlines content-driven development in Nuxt 4 by providing a unified way to manage Markdown files, frontmatter, and dynamic rendering with ContentRenderer, eliminating brittle, hard-coded content integrations.

Core Features & Use Cases

  • Content-driven routing and navigation using the content directory to build scalable docs or knowledge bases.
  • Frontmatter-driven metadata and SEO enabling structured data and search indexing for content-rich apps.
  • Query and render with ContentRenderer to display rich markdown content with dynamic components and navigation.
  • Use Case: Build a documentation site where content editors add Markdown files and authors render them automatically in a Nuxt 4 app.

Quick Start

Use ContentRenderer to display the sample content from the content/ directory in a Nuxt 4 page.

Frequently Asked Questions about nuxt-content

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

FAQPage Schema
How do I render Markdown content dynamically in a Nuxt 4 application?▼

To render Markdown content dynamically in Nuxt 4, use the ContentRenderer component with the @nuxt/content module. It fetches Markdown files from the content/ directory and renders them with dynamic components and navigation automatically.

What is the best way to manage frontmatter and build documentation with Nuxt?▼

Managing frontmatter and building documentation with Nuxt is best handled by the @nuxt/content module. It provides a cohesive content layer that enables content-driven routing, structured metadata, and SEO indexing for scalable knowledge bases.

Does the Nuxt Content module support querying Markdown files for dynamic navigation?▼

Yes, the Nuxt Content module supports querying Markdown files to generate dynamic navigation. By leveraging the queryContent function, you can expose navigation directly from your content data and frontmatter conventions in Nuxt 4.

Can I use ContentRenderer to display rich Markdown with custom Vue components?▼

Yes, you can use ContentRenderer to display rich Markdown and render custom Vue components within your content. It integrates with the Nuxt 4 content directory to map Markdown files to dynamic components seamlessly.

Why are my hard-coded Markdown content integrations breaking in Nuxt 4?▼

Hard-coded Markdown integrations break because they lack a unified content layer. Using @nuxt/content with ContentRenderer and frontmatter conventions eliminates brittle integrations and ensures reliable content querying in Nuxt 4.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
ketzal88ketzal88

site-architecture

Plan website information architecture with page hierarchy and navigation specs.

Community
Advanced
leighayanidleighayanid

motion

Create declarative UI animations in Vue 3 and Nuxt 4 with motion-v.

Community
Intermediate
lbliiilbliii
41

bengal-content-migration

Migrates static site and Markdown content to Bengal format.

Community
Intermediate