Page

GitLab
Um layout em grade para as suas páginas com colunas à esquerda e à direita.

Uso

O componente Page ajuda você a criar layouts com colunas esquerda e direita opcionais. Ele é perfeito para construir sites de documentação e outras páginas focadas em conteúdo.

<template>
  <NPage>
    <template #left />

    <template #right />
  </NPage>
</template>
A página é exibida como um layout de coluna única centralizado se nenhum slot for especificado.

Exemplos

Embora estes exemplos usem o Nuxt Content, os componentes podem ser integrados a qualquer sistema de gerenciamento de conteúdo.

Dentro de um layout

Use o componente Page em um layout com o slot left para exibir uma navegação:

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

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

<template>
  <NPage>
    <template #left>
      <NPageAside>
        <NContentNavigation :navigation="navigation" />
      </NPageAside>
    </template>

    <slot />
  </NPage>
</template>
Neste exemplo, usamos o componente ContentNavigation para exibir a navegação injetada em app.vue.

Dentro de uma página

Use o componente Page em uma página com o slot right para exibir um sumário:

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>
  <NPage>
    <NPageHeader :title="page.title" :description="page.description" />

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

      <NSeparator />

      <NContentSurround :surround="surround" />
    </NPageBody>

    <template #right>
      <NContentToc :links="page.body.toc.links" />
    </template>
  </NPage>
</template>
Neste exemplo, usamos o componente ContentToc para exibir o sumário.

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{}

Tema

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 '@nitro/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

No recent changes

ChangelogVersions

Exiba uma lista de versões do changelog em uma linha do tempo.

PageAnchors

Uma lista de âncoras para ser exibida na página.