The PageHeader component displays a header for your page.
Use it inside the default slot of the Page component, before the PageBody component:
<template>
<UPage>
<UPageHeader />
<UPageBody />
</UPage>
</template>
Use the title prop to display a title in the header.
<template>
<UPageHeader title="PageHeader" />
</template>
Use the description prop to display a description in the header.
<template>
<UPageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
/>
</template>
Use the headline prop to display a headline in the header.
<template>
<UPageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
headline="Components"
/>
</template>
Use the links prop to display a list of Button in the header.
<script setup lang="ts">
const links = ref([
{
label: 'GitHub',
icon: 'i-simple-icons-github',
to: 'https://github.com/nuxt/ui/tree/v4/src/runtime/components/PageHeader.vue',
target: '_blank'
}
])
</script>
<template>
<UPageHeader
title="PageHeader"
description="A responsive page header with title, description and actions."
headline="Components"
:links="links"
/>
</template>
Use the PageHeader component in a page to display the header of the page:
<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"
:headline="page.headline"
:links="page.links"
/>
<UPageBody>
<ContentRenderer :value="page" />
<USeparator />
<UContentSurround :surround="surround" />
</UPageBody>
<template #right>
<UContentToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
| Prop | Default | Type |
|---|---|---|
as |
|
The element or component this component should render as. |
headline |
| |
title |
| |
description |
| |
links |
Display a list of Button next to the title.
| |
ui |
|
| Slot | Type |
|---|---|
headline |
|
title |
|
description |
|
links |
|
default |
|
export default defineAppConfig({
ui: {
pageHeader: {
slots: {
root: 'relative border-b border-default py-8',
container: '',
wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
description: 'text-lg text-pretty text-muted',
links: 'flex flex-wrap items-center gap-1.5'
},
variants: {
title: {
true: {
description: 'mt-4'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pageHeader: {
slots: {
root: 'relative border-b border-default py-8',
container: '',
wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
description: 'text-lg text-pretty text-muted',
links: 'flex flex-wrap items-center gap-1.5'
},
variants: {
title: {
true: {
description: 'mt-4'
}
}
}
}
}
})
]
})
5cb65 — feat: import @nuxt/ui-pro components