Introduction

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

Nuxt UI's typography system works in two complementary ways:

1. Automatic Prose Conversion - When using <ContentRenderer>, your markdown is automatically converted to enhanced prose components with beautiful styling
2. Vue Components - Specialized components using MDC syntax for interactive and enhanced content

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

Your content gets theme-aware styling, dark mode support, and accessibility features without any configuration.

Content Categories

Markdown & Prose Components

Standard markdown elements enhanced with beautiful styling:

Components

Interactive elements for rich content authoring using MDC syntax:

Features Overview

Automatic Styling

All typography 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
• Anchor links - Automatic heading anchor generation

Accessibility First

Every 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

Usage Examples

Prose Components (Automatic)

Write standard markdown and let Nuxt UI enhance it:

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

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

Components (MDC Syntax)

Use specialized components within your markdown:

::callout{icon="i-lucide-info" color="blue"}
This is a callout with an icon and custom color. You can use **markdown** formatting inside.
::

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>

Customization

Theme Customization

Customize typography 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'
      }
    }
  }
})

Getting Started

1. Write content - Use standard markdown syntax in your content files
2. Add components - Enhance with Vue components using MDC syntax
3. Render content - Use ContentRenderer to automatically style everything
4. Customize as needed - Override themes or use components directly