PageBody
A wrapper around your pages content.
Usage
Use the PageBody component in the default slot of a Page.
This wrapper will add some spacing to your content.
<template>
<UPage>
<UPageBody>
<UPageGrid>
<UPageCard />
</UPageGrid>
</UPageBody>
</UPage>
</template>
You can use the prose prop to automatically add prose prose-primary dark:prose-invert max-w-none classes to your content.
<template>
<UPage>
<UPageBody prose>
<ContentRenderer :value="page" />
</UPageBody>
</UPage>
</template>
You'll usually use this component in a [...slug].vue page:
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>
<template>
<UPage>
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
<UPageBody prose>
<ContentRenderer v-if="page.body" :value="page" />
</UPageBody>
<template #right>
<UDocsToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
Slots
default
{}
Props
ui
{}
{}prose
boolean
false