Nuxt UI Pro v1.0 is out with dashboard components!

PageLinks

A list of links to display in your pages.

Usage

Use the title and links props to display a list of links.

Discover

<template>
  <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"
  />
</template>

You'll usually use this component in the #bottom slot of an Aside or ContentToc component. This will match the design of the links from ContentToc and NavigationTree.

pages/[...slug].vue
<script setup lang="ts">
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>
      <UContentToc :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>
      </UContentToc>
    </template>
  </UPage>
</template>

Slots

title
{}
default
{}

Props

ui
any
{}
links
PageLink[]
[]
title
string
undefined

Config

{
  wrapper: 'space-y-3',
  title: 'text-sm/6 font-semibold flex items-center gap-1.5',
  container: 'space-y-3 lg:space-y-1.5',
  base: 'flex items-center gap-1.5',
  active: 'text-primary',
  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200',
  icon: {
    base: 'w-5 h-5 flex-shrink-0'
  },
  avatar: {
    base: 'self-center',
    size: '2xs'
  },
  externalIcon: {
    name: 'i-heroicons-arrow-up-right-20-solid',
    base: 'w-3 h-3 absolute top-0.5 -right-3.5 text-gray-400 dark:text-gray-500'
  },
  label: 'text-sm/6 font-medium relative'
}