ProComponentsPage
PageHeader
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.
<UPageHeader
headline="Page"
title="PageHeader"
description="A responsive header for your pages."
/>
Use the links prop to add some Buttons at the right of the header.
Page
PageHeader
A responsive header for your pages.
<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' }]"
/>
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.
<UPageHeader
title="tailwindcss"
description="Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS."
icon="i-logos-tailwindcss-icon"
/>
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 helper to find the headline of the current page:
pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
const headline = computed(() => findPageHeadline(page.value))
</script>
<template>
<UPage>
<UPageHeader v-bind="page" :headline="headline" />
</UPage>
</template>
You can also easily display a breadcrumb by using the findPageBreadcrumb helper:
pages/[...slug].vue
<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'
const navigation = inject<Ref<NavItem[]>>('navigation')
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
const breadcrumb = computed(() => findPageBreadcrumb(navigation.value, page.value))
</script>
<template>
<UPage>
<UPageHeader v-bind="page">
<template #headline>
<NuxtLink v-for="(link, index) in breadcrumb" :key="index" :to="link._path" :class="[index < breadcrumb.length - 1 && 'text-gray-500 dark:text-gray-400']" class="flex items-center gap-1.5 group">
<span :class="[index < breadcrumb.length - 1 && 'group-hover:text-gray-700 dark:group-hover:text-gray-200']">{{ link.title }}</span>
<UIcon v-if="index < breadcrumb.length - 1" name="i-heroicons-chevron-right" class="w-4 h-4" />
</NuxtLink>
</template>
</UPageHeader>
</UPage>
</template>
The
Breadcrumb component will soon be available in @nuxt/ui so it will make this even simpler!