Rendering

The <ContentDoc> and <ContentRenderer> components render the body of a Markdown document in a rich-text format.

Nuxt Content provides 2 components to render Markdown content in a rich-text format, applying HTML tags (Prose) and displaying Vue components (MDC).

• The <ContentDoc> component accepts an optional path prop to fetch the content/ directory.
• The <ContentRenderer> component renders a Markdown document returned by queryContent().

<ContentDoc />

The <ContentDoc> component fetches a document and renders it in a rich-text format.

The fetching endpoint defaults to the current route ($route.path). An explicit path can be passed to the component with the path props.

Create a catch all route named pages/[...slug].vue and add the component:

<template>  <main>    <ContentDoc />  </main></template>

It will fetch the document corresponding to the $route.path and render it. It will also handle the head management so you are ready to go, see the front-matter section.

You can use the <ContentDoc> component to render a specific document by specifying the path property:

<template>  <main>    <ContentDoc path="/about" />  </main></template>

Note that no head management will be done when the path is specified.

Take a look at the Hello world example to see it in action.

<ContentRenderer />

The <ContentRenderer> component renders the body of a Markdown document returned by queryContent() in a rich-text format. It fallbacks to rendering the content in a <pre> tag if the content is not Markdown ( source code).

<ContentRenderer> accepts a value prop containing the data.

<script setup>const { data } = await useAsyncData('hello', () => queryContent('/hello').findOne())</script><template>  <ContentRenderer :value="data" /></template>