Usage
This component is used internally in the #panel slot of the HeaderLinks component.
<script setup lang="ts">
const links = [{
label: 'Pricing',
to: '/pro/pricing',
icon: 'i-heroicons-credit-card',
description: 'A simple pricing, for solo developers or teams.'
}, {
label: 'Templates',
to: '/pro/templates',
icon: 'i-heroicons-computer-desktop',
description: 'Get started with one of our official templates.'
}, {
label: 'Getting Started',
to: '/pro/getting-started',
icon: 'i-heroicons-book-open',
description: 'Learn how to use Nuxt UI Pro in your app.'
}, {
label: 'Components',
to: '/pro/components',
icon: 'i-heroicons-cube',
description: 'Discover all the components available in Nuxt UI Pro.'
}]
</script>
<template>
<UHeaderPopoverLinks :links="links" />
</template>
Props
ui
any
{}links
HeaderPopoverLink[]
[]Config
{
wrapper: 'p-2 space-y-1',
base: 'block px-2 py-1.5 rounded-md flex items-start gap-1.5',
active: 'bg-gray-100/50 dark:bg-gray-800/50 text-primary',
inactive: 'hover:bg-gray-100/50 dark:hover:bg-gray-800/50',
label: 'font-semibold text-sm/6 inline-block relative',
description: 'text-sm leading-snug text-gray-500 dark:text-gray-400 line-clamp-2',
icon: {
base: 'w-4 h-4 flex-shrink-0 mt-1'
},
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'
}
}