<ContentRenderer>

The <ContentRenderer> component renders a document coming from a query with queryContent().

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
• components: The map of custom components to use for rendering. This prop will pass to markdown renderer and will not affect other file types.
  • Type: object
  • Default: {}
• data: A map of variables to inject into the markdown content for later use in binding variables.
  • Type: object
  • Default: {}

Slots

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

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

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

<template>
  <div>
    <ContentSlot :use="$slots.default" unwrap="p" />
  </div>
</template>

::custom-p
this is my custom paragraph
::

<script setup lang="ts">
import { CustomParagraph } from '#components';

const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())

const components = {
  'custom-p': CustomParagraph
}
</script>

<template>
  <main>
    <ContentRenderer :value="data">
      <h1>{{ data.title }}</h1>
      <ContentRendererMarkdown :value="data" :components="components" />
    </ContentRenderer>
  </main>
</template>