Page

Een rasterlay-out voor uw pagina

Gebruik

Het onderdeel Pagina helpt u lay-outs te maken met optionele linker- en rechterkolommen. Het is perfect voor het bouwen van documentatiesites en andere inhoudsgerichte pagina 's.

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

    <template #right />
  </UPage>
</template>

De pagina wordt weergegeven als een gecentreerde lay-out met één kolom als er geen slots zijn opgegeven.

Voorbeelden

Hoewel deze voorbeelden Nuxt Content gebruiken, kunnen de componenten worden geïntegreerd met elk contentbeheersysteem.

Binnen een layout

Gebruik het onderdeel Pagina in een lay-out met de left-sleuf om een navigatie weer te geven:

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 dit voorbeeld gebruiken we de ContentNavigation-component om de navigatie weer te geven die in app.vue is geïnjecteerd.

Binnen een pagina

Gebruik het onderdeel Pagina in een pagina met de right-sleuf om een inhoudsopgave weer te geven:

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 dit voorbeeld gebruiken we de ContentToc-component om de inhoudsopgave weer te geven.

API

Props

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

Slot	Type
`left`	`{}`
`default`	`{}`
`right`	`{}`

Thema

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

Wijzigingsgelog

No recent changes

ChangelogVersions

Display a list of changelog versions in a timeline.

PageAnchors

A list of anchors to be displayed in the page.