Usage
Use the title and links props to display a list of links.
Discover
<UPageLinks
:links="[{ icon: 'i-heroicons-pencil-square', label: 'Edit this page' }, { icon: 'i-heroicons-star', label: 'Star on GitHub', to: 'https://github.com/nuxt/ui', target: '_blank' }, { icon: 'i-heroicons-book-open', label: 'Nuxt documentation', to: 'https://nuxt.com', target: '_blank' }]"
title="Discover"
/>
You'll usually use this component in the #bottom slot of an Aside or DocsToc component. This will match the design of the links from DocsToc and NavigationTree.
pages/[...slug].vue
<script setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
const links = computed(() => [{
icon: 'i-ph-pen-duotone',
label: 'Edit this page',
to: `https://github.com/nuxt/nuxt/edit/main/docs/${page?.value?._file?.split('/').slice(1).join('/')}`,
target: '_blank'
}, {
icon: 'i-ph-shooting-star-duotone',
label: 'Star on GitHub',
to: 'https://github.com/nuxt/nuxt',
target: '_blank'
}, {
icon: 'i-ph-chat-centered-text-duotone',
label: 'Chat on Discord',
to: 'https://discord.com/invite/ps2h6QT',
target: '_blank'
}, {
icon: 'i-ph-hand-heart-duotone',
label: 'Become a Sponsor',
to: 'https://github.com/sponsors/nuxt',
target: '_blank'
}])
</script>
<template>
<UPage>
<UPageHeader v-bind="page" />
<UPageBody prose>
<ContentRenderer v-if="page && page.body" :value="page" />
</UPageBody>
<template v-if="page.toc !== false" #right>
<UDocsToc :links="page.body?.toc?.links">
<template #bottom>
<div class="hidden lg:block space-y-6" :class="{ '!mt-6': page.body?.toc?.links?.length }">
<UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
<UPageLinks title="Community" :links="links" />
</div>
</template>
</UDocsToc>
</template>
</UPage>
</template>
Slots
title
{}
default
{}
Props
title
string
links
Link[]
ui
unknown