ContentRenderer

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

This component works only with pages collections.

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 to render the excerpt only without the rest of the content.
  • 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: {}
• prose: Whether or not to render Prose components instead of HTML tags.
  • Type: boolean
  • Default: undefined
• class: Root tag to use for rendering.
  • Type: string or object
  • Default: undefined
• unwrap: Tags to unwrap separated by spaces.
  • Type: boolean or string
  • Default: false
  • Example: 'ul li'

Example

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})
</script>

<template>
  <ContentRenderer v-if="page" :value="page" />
</template>