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

Slots

default

{}

Props

{}

{}

prose

boolean

false

PageHeader

A responsive header for your pages.

PageColumns

A customizable column component to display cards in your pages.