PageBody - Nuxt UI Pro

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>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

Slots

default

{}

Props

DeepPartial<{ wrapper: string; prose: string; }>

{}

prose

boolean

false

Config

{
  wrapper: 'mt-8 pb-24',
  prose: 'prose prose-primary dark:prose-invert max-w-none'
}

Page

A dynamic grid layout for your pages.

PageCard

A pre-built Card to add links in your pages.