Usage
This component is used internally in the #center slot of the Footer component.
<script setup lang="ts">
const links = [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: '/getting-started'
}, {
label: 'Playground',
icon: 'i-simple-icons-stackblitz',
to: '/playground'
}, {
label: 'Roadmap',
icon: 'i-heroicons-map',
to: '/roadmap'
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro'
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}]
</script>
<template>
<UFooterLinks :links="links" />
</template>
Props
ui
any
{}links
FooterLink[]
[]Config
{
wrapper: 'flex flex-col md:flex-row items-center justify-center gap-4 lg:gap-6',
base: 'text-sm',
active: 'text-gray-900 dark:text-white font-medium',
inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
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'
}
}