PageHeader

GitHub

A responsive header for your pages.

Usage

Use the PageHeader component in the default slot of a Page.

<template>
  <UPage>
    <UPageHeader />

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

Use the title, description and headline props to customize the header.

Page

PageHeader

A responsive header for your pages.

<template>
  <UPageHeader
    headline="Page"
    title="PageHeader"
    description="A responsive header for your pages."
  />
</template>

Use the links prop to add some Buttons at the right of the header.

Page

PageHeader

GitHub

A responsive header for your pages.

<template>
  <UPageHeader
    headline="Page"
    title="PageHeader"
    description="A responsive header for your pages."
    :links="[{ label: 'GitHub', color: 'white', to: 'https://github.com/nuxt/ui-pro/blob/dev/components/page/PageHeader.vue', target: '_blank', icon: 'i-simple-icons-github' }]"
  />
</template>

Use the icon prop to add an icon to the left of the title.

tailwindcss

Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS.

<template>
  <UPageHeader
    title="tailwindcss"
    description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
    icon="i-simple-icons-tailwindcss"
  />
</template>

You'll usually use this component in a [...slug].vue page:

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" :links="page.links" />

    <UPageBody prose>
      <ContentRenderer v-if="page.body" :value="page" />
    </UPageBody>

    <template #right>
      <UDocsToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>
When using @nuxt/content, you can use the findPageHeadline or findPageBreadcrumb utils to set the headline prop or slot.

Slots

headline
{}
icon
{}
title
{}
links
{}
description
{}
default
{}

Props

icon
string
undefined
title
string
undefined
description
string
undefined
ui
{}
{}
headline
string
undefined
links
(Button & { click?: Function; })[]
[]

PageHero

A responsive hero for your pages.

PageBody

A wrapper around your pages content.