<ContentRenderer>

Takes your component from an AST to a wonderful template.


The <ContentRenderer> component renders a document coming from a query.

It will use <ContentRendererMarkdown> component to render .md file types.

Other types will currently be passed to default slot via v-slot="{ data }" or be rendered inside <pre /> tag.

Props

  • value: The document to render.
    • Type: ParsedContent
    • Default: {}
  • tag: The tag to use for the renderer element if it is used.
    • Type: String
    • Default: 'div'
  • excerpt: Whether or not to render the excerpt.
    • Type: Boolean
    • Default: false

Slots

The default slot can be used to render the content via v-slot="{ data }" syntax.

pages/[...slug.vue]
<script setup lang="ts">const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())</script><template>  <main>    <ContentRenderer :value="data">      <h1>{{ data.title }}</h1>      <ContentRendererMarkdown :value="data" />    </ContentRenderer>  </main></template>

The empty slot can be used to display a default content when the document is empty:

pages/[...slug.vue]
<script setup lang="ts">const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())</script><template>  <main>    <ContentRenderer :value="data">      <template #empty>        <p>No content found.</p>      </template>    </ContentRenderer>  </main></template>