Page

GitHub à
Une mise en page de grille pour vos pages avec des colonnes de gauche et de droite.

Utilisation

Le composant Page vous aide à créer des mises en page avec des colonnes optionnelles de gauche et de droite. Il est parfait pour créer des sites de documentation et d'autres pages axées sur le contenu.

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

    <template #right />
  </UPage>
</template>
La page s'affiche sous la forme d'une mise en page à colonne centrée si aucun emplacement n'est spécifié.

Exemples

Bien que ces exemples utilisent Nuxt Content, les composants peuvent être intégrés à n'importe quel système de gestion de contenu.

Dans un layout

Utilisez le composant Page dans une mise en page avec l'emplacement left pour afficher une navigation:

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>
Dans cet exemple, nous utilisons le composant ContentNavigation pour afficher la navigation injectée dans app.vue.

Dans une page

Use the Page component in a page with the right slot to display a table of contents:

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 this example, we use the ContentToc component to display the table of contents.

api

Props équipement

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

thème

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

No recent changes

ChangelogVersions

Display a list of changelog versions in a timeline.

PageAnchors

A list of anchors to be displayed in the page.