PageBody

GitHub
The main content of your page.

Usage

The PageBody component wraps your main content and adds some padding for consistent spacing.

Use it inside the default slot of the Page component, after the PageHeader component:

<template>
  <UPage>
    <UPageHeader />

    <UPageBody />
  </UPage>
</template>

Examples

While these examples use Nuxt Content, the components can be integrated with any content management system.

Within a page

Use the PageBody component in a page to display the content of the page:

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <UContentSurround :surround="surround" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>
In this example, we use the ContentRenderer component from @nuxt/content to render the content of the page.

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pageBody: {
      base: 'mt-8 pb-24 space-y-12'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageBody: {
          base: 'mt-8 pb-24 space-y-12'
        }
      }
    })
  ]
})

Changelog

5cb65 — feat: import @nuxt/ui-pro components

PageAside

A sticky aside to display your page navigation.

PageCard

A pre-styled card component that displays a title, description and optional link.