Page

GitHub
Ein Raster-Layout für Ihre Seiten mit linken und rechten Spalten.

Bearbeiten

Die Komponente Seite hilft Ihnen beim Erstellen von Layouts mit optionalen linken und rechten Spalten. Sie eignet sich perfekt zum Erstellen von Dokumentationswebsites und anderen inhaltsorientierten Seiten.

<template>
  <UPage>
    <template #left />

    <template #right />
  </UPage>
</template>
Die Seite wird als zentriertes, einspaltiges Layout angezeigt, wenn keine Slots angegeben sind.

Examples (Beispiele)

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

In einem Layout

Verwenden Sie die Komponente Seite in einem Layout mit dem Steckplatz left, um eine Navigation anzuzeigen:

layouts/docs.vue
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
</script>

<template>
  <UPage>
    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" />
      </UPageAside>
    </template>

    <slot />
  </UPage>
</template>
In diesem Beispiel verwenden wir die ContentNavigation-Komponente, um die in app.vue eingespeiste Navigation anzuzeigen.

innerhalb einer Seite

Verwenden Sie die Komponente Seite in einer Seite mit dem right-Slot, um ein Inhaltsverzeichnis 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 ContentToc-Komponente, um das Inhaltsverzeichnis anzuzeigen.

API (englisch)

Props Bearbeiten

Prop Default Type
as
'div'
any

The element or component this component should render as.

ui
{ root?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; }

Slots Bearbeiten

Slot Type
left
{}
default
{}
right
{}

Theme (englisch)

app.config.ts
export default defineAppConfig({
  ui: {
    page: {
      slots: {
        root: 'flex flex-col lg:grid lg:grid-cols-10 lg:gap-10',
        left: 'lg:col-span-2',
        center: 'lg:col-span-8',
        right: 'lg:col-span-2 order-first lg:order-last'
      },
      variants: {
        left: {
          true: ''
        },
        right: {
          true: ''
        }
      },
      compoundVariants: [
        {
          left: true,
          right: true,
          class: {
            center: 'lg:col-span-6'
          }
        },
        {
          left: false,
          right: false,
          class: {
            center: 'lg:col-span-10'
          }
        }
      ]
    }
  }
})
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: {
        page: {
          slots: {
            root: 'flex flex-col lg:grid lg:grid-cols-10 lg:gap-10',
            left: 'lg:col-span-2',
            center: 'lg:col-span-8',
            right: 'lg:col-span-2 order-first lg:order-last'
          },
          variants: {
            left: {
              true: ''
            },
            right: {
              true: ''
            }
          },
          compoundVariants: [
            {
              left: true,
              right: true,
              class: {
                center: 'lg:col-span-6'
              }
            },
            {
              left: false,
              right: false,
              class: {
                center: 'lg:col-span-10'
              }
            }
          ]
        }
      }
    })
  ]
})

Changelog (deutsch)

No recent changes

ChangelogVersions

Display a list of changelog versions in a timeline.

PageAnchors

A list of anchors to be displayed in the page.