Seitenkörper

GitHub
Der Hauptinhalt Ihrer Seite.

Bearbeiten

Die PageBody-Komponente umschließt Ihren Hauptinhalt und fügt etwas Padding für konsistente Abstände hinzu.

Verwenden Sie es innerhalb des Standardsteckplatzes der Komponente Page, nach der Komponente PageHeader:

<template>
  <UPage>
    <UPageHeader />

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

Examples (Beispiele)

Während diese Beispiele Nuxt Content verwenden, können die Komponenten in jedes Content Management System integriert werden.

innerhalb einer Seite

Verwenden Sie die PageBody-Komponente auf einer Seite, um den Inhalt der Seite anzuzeigen:

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 diesem Beispiel verwenden wir die Komponente ContentRenderer von @nuxt/content, um den Inhalt der Seite darzustellen.

API (Englisch)

Props (englisch)

Prop Default Type
as
'div'
any

The element or component this component should render as.

ui
{ base?: any; }

Slots (englisch)

Slot Type
default
{}

Theme Bearbeiten

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 (englisch)

No recent changes

PageAside

A sticky aside to display your page navigation.

PageCard

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