Footer
A responsive <footer> component.
Usage
Use the links prop to display a list of links in the center of the footer. You can also use the #left, #center and #right slots to customize it further.
<script setup>
const links = [{
label: 'Nuxt UI',
to: 'https://ui.nuxt.com/'
}, {
label: 'Nuxt Docs',
to: 'https://nuxt.com'
}, {
label: 'Nuxt Studio',
to: 'https://nuxt.studio'
}]
</script>
<template>
<UFooter :links="links">
<template #left>
Copyright © {{ new Date().getFullYear() }}
</template>
<template #right>
<UButton icon="i-simple-icons-x" color="gray" variant="ghost" to="https://x.com/nuxt_js" target="_blank" />
<UButton icon="i-simple-icons-discord" color="gray" variant="ghost" to="https://discord.com/invite/ps2h6QT" target="_blank" />
<UButton icon="i-simple-icons-github" color="gray" variant="ghost" to="https://github.com/nuxt/nuxt" target="_blank" />
</template>
</UFooter>
</template>
There is also a
#top slot available, check out the FooterColumns component.Slots
top
{}
right
{}
center
{}
left
{}
Props
ui
{}
{}links
FooterLink[]
[]