Markdown & Prose

Nuxt UI transforms your markdown content into beautifully styled prose components. When using <ContentRenderer>, your markdown is automatically converted to enhanced prose components that provide consistent styling and professional typography.

How It Works

Prose components work in two ways:

1. Automatic conversion - When using <ContentRenderer>, markdown is automatically styled
2. Direct usage - Use prose components directly in Vue templates with the Prose prefix

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Prop</ProseTh>
        <ProseTh>Default</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>color</ProseCode>
        </ProseTd>
        <ProseTd>
          <ProseCode>neutral</ProseCode>
        </ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

Content Categories

Organize your content with these specialized prose components:

Features Overview

Automatic Styling

All prose components inherit your theme settings automatically:

• Color mode - Seamless light/dark theme switching
• Typography scale - Consistent font sizes and line heights
• Spacing system - Proper margins and padding
• Design tokens - Access to your custom color palette

Enhanced Functionality

Beyond basic markdown, Nuxt UI adds powerful features:

• Image zoom - Interactive image viewing experience
• Code copy - One-click code copying with visual feedback
• Syntax highlighting - Beautiful code blocks with Shiki
• Responsive tables - Tables that work on all screen sizes
• Anchor links - Automatic heading anchor generation

Accessibility First

Every prose component is built with accessibility in mind:

• Semantic HTML - Proper heading hierarchy and markup
• Screen reader support - Alt text and ARIA labels
• Keyboard navigation - Full keyboard accessibility
• High contrast - WCAG compliant color combinations

Getting Started

1. Write markdown - Use standard markdown syntax in your content files
2. Render with ContentRenderer - Let Nuxt UI automatically style your content
3. Customize as needed - Override themes or use components directly

<template>
  <ContentRenderer :value="data" />
</template>

<script setup>
const { data } = await $fetch('/api/content')
</script>

Advanced Usage

Direct Component Usage

Import and use prose components directly for maximum control:

<template>
  <article>
    <ProseH1>Custom Heading</ProseH1>
    <ProseP>
      This paragraph uses prose styling but gives you
      complete control over the content structure.
    </ProseP>
  </article>
</template>

Theme Customization

Customize prose components through your app configuration:

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        base: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl'
      },
      p: {
        base: 'leading-7 [&:not(:first-child)]:mt-6'
      }
    }
  }
})

Next Steps

Explore each content category to learn about specific components, their features, and customization options:

• Start with Headers and Text for the basics
• Learn about Lists and Tables for structured content
• Discover Images and Embeds for visual elements
• Master Code for technical documentation

For interactive content creation, see Vue Components which provides specialized components beyond standard markdown.

Best Practices

• Structure content logically with proper heading hierarchy
• Use semantic markup - lists for items, tables for data
• Optimize images for web performance
• Write descriptive alt text for accessibility
• Keep code examples focused and properly highlighted
• Test responsive behavior across different screen sizes

Your content will automatically benefit from Nuxt UI's typography system while maintaining flexibility for custom needs.