Components
ContentRenderer
Takes your component from an AST to a wonderful template.
The <ContentRenderer> component renders a document coming from a query with queryCollections().
This component only works with the
pages collection.Props
| Prop | Default | Type | Description |
|---|---|---|---|
value | {} | ParsedContent | The document to render. |
tag | 'div' | string | The tag to use for the renderer element if it is used. |
excerpt | false | boolean | Whether to render the excerpt only without the rest of the content. |
components | {} | object | The map of custom components to use for rendering. This prop will pass to the markdown renderer and will not affect other file types. |
data | {} | object (required) | A map of variables to inject into the markdown content for later use in binding variables. |
prose | undefined | boolean | Whether or not to render Prose components instead of HTML tags. |
class | undefined | string or object | Root tag to use for rendering. |
unwrap | false | boolean or string | Tags to unwrap separated by spaces. Example: 'ul li'. |
Example Usage
pages/[...slug].vue
<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>
Handling Missing Pages
If the queried content is missing, you can display a custom fallback message.
pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('docs').path(route.path).findOne()
})
</script>
<template>
<template v-if="page">
<ContentRenderer :value="page" />
</template>
<template v-else>
<div class="empty-page">
<h1>Page Not Found</h1>
<p>Oops! The content you're looking for doesn't exist.</p>
<NuxtLink to="/">Go back home</NuxtLink>
</div>
</template>
</template>
Handling Empty Pages
If the queried content is empty, you can display a custom fallback message.