页面主体

您页面的主要内容。

用法

PageBody 组件包裹您的主要内容，并添加一些内边距以保持一致的间距。

将其用作 Page 组件的默认插槽内，位于 PageHeader 组件之后。

<template>
  <UPage>
    <UPageHeader />

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

示例

尽管这些示例使用Nuxt Content，但这些组件可以与任何内容管理系统集成。

在页面内

在页面中使用 PageBody 组件来显示页面的内容。

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>

在此示例中，我们使用ContentRenderer来自 @nuxt/content 的组件来渲染页面的内容。

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。

插槽

插槽	类型
`default`	`{}`

主题

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'
        }
      }
    })
  ]
})

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

PageAside

一个固定侧边栏，用于显示页面导航。

PageCard

一个预设样式的卡片组件，显示标题、描述和可选链接。