Render Content

<ContentDoc />

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

By default it fetchs the current route ($route.path) but an explicit path can be passed to the component with the path prop.

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 using useContentHead() section.

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

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

<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>