Usage
Use the links prop to display a list of links. Each link will be a column with its children underneath.
Community
Solutions
<script setup lang="ts">
const links = [{
label: 'Community',
children: [{
label: 'Nuxters',
to: 'https://nuxters.nuxt.com',
target: '_blank'
}, {
label: 'Video Courses',
to: 'https://masteringnuxt.com/nuxt3?ref=nuxt',
target: '_blank'
}, {
label: 'Nuxt on GitHub',
to: 'https://github.com/nuxt',
target: '_blank'
}]
}, {
label: 'Solutions',
children: [{
label: 'Nuxt Content',
to: 'https://content.nuxt.com/',
target: '_blank'
}, {
label: 'Nuxt DevTools',
to: 'https://devtools.nuxt.com/',
target: '_blank'
}, {
label: 'Nuxt Image',
to: 'https://image.nuxt.com/',
target: '_blank'
}, {
label: 'Nuxt UI',
to: 'https://ui.nuxt.com/',
target: '_blank'
}]
}]
</script>
<template>
<UFooterColumns :links="links">
<template #right>
<UFormGroup name="email" label="Subscribe to our newsletter" size="lg">
<UInput type="email" :ui="{ icon: { trailing: { pointer: '' } } }">
<template #trailing>
<UButton type="submit" size="2xs" color="black" label="Subscribe" />
</template>
</UInput>
</UFormGroup>
</template>
</UFooterColumns>
</template>
The FooterColumns component is meant to be used in the #top slot of the Footer.
AppFooter.vue
<template>
<UFooter>
<template #top>
<UFooterColumns :links="links" />
</template>
</UFooter>
</template>
Slots
left
{}
right
{}
Props
links
{ label: string; children: FooterLink[]; }[]
[]ui
any
{}Config
{
wrapper: 'xl:grid xl:grid-cols-3 xl:gap-8',
left: 'mb-10 xl:mb-0',
center: 'flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2',
right: 'mt-10 xl:mt-0',
label: 'text-sm/6 font-semibold text-gray-900 dark:text-white',
list: 'mt-6 space-y-4',
base: 'text-sm relative',
active: 'text-gray-900 dark:text-white font-medium',
inactive: 'text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white',
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'
}
}