Introduction

Nuxt UI provides a comprehensive typography system that transforms your markdown content into beautifully styled documentation. Whether you're writing technical documentation, blog posts, or any other content, Nuxt UI ensures consistent and professional typography throughout your application.

Overview

The typography system in Nuxt UI is built around two main concepts:

Content Integration

When using Nuxt UI with Nuxt Content, your markdown content is automatically enhanced with beautiful typography:

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

The ContentRenderer component automatically applies Nuxt UI's typography styles to your markdown content, transforming it into a polished, professional presentation without any additional configuration.

What's Included

Markdown & Prose Components

Complete markdown support organized by content type:

Overview of Markdown & Prose →

Vue Components

Specialized components for enhanced content authoring:

• Interactive elements - Badges, callouts, collapsibles
• Code presentation - Code groups, previews, and trees
• Layout components - Cards, field groups, and steps
• UI elements - Icons, keyboard shortcuts, and tabs

Discover Vue Components →

Direct Usage

You can use any prose component directly in your Vue templates with the Prose prefix:

<template>
  <ProseTable>
    <ProseThead>
      <ProseTr>
        <ProseTh>Component</ProseTh>
        <ProseTh>Description</ProseTh>
      </ProseTr>
    </ProseThead>
    <ProseTbody>
      <ProseTr>
        <ProseTd>
          <ProseCode>Badge</ProseCode>
        </ProseTd>
        <ProseTd>Display version numbers or status labels</ProseTd>
      </ProseTr>
    </ProseTbody>
  </ProseTable>
</template>

This approach gives you full control over your content structure while maintaining consistent typography styling.

Getting Started

1. Install Nuxt UI - Follow the installation guide
2. Set up Nuxt Content - Add content management capabilities
3. Start writing - Create markdown files and let Nuxt UI handle the styling

Ready to enhance your content? Start with Markdown & Prose for an overview, then explore specific content types, or jump to Vue Components for advanced interactive elements.