FreeComponent · Footers
Footer Columns
Multi-column Vue 3 footer with a brand blurb, social icon links and a bottom bar for legal links and system status. Tailwind CSS, dark mode.
by Vueplay
Vue footer components
Footers collect the links that do not fit in the header: product pages, legal notices, contact details and social profiles. These Vue 3 footer components give you those layouts ready to use, from a single row to multi-column sitemaps.
They are written with <script setup lang="ts"> and Tailwind CSS 4, take their link groups as props, and support class-based dark mode. Install them with npm or copy the source into your project.
Free
FreeComponent · Footers
Newsletter Footer
Vue 3 footer with a newsletter signup form: email validation, loading and success states, and a subscribe event. Tailwind CSS, dark mode.
by Vueplay
Good to know
Building footers that hold up
- Use the footer landmark
- Render the outer element as <footer> so it becomes the contentinfo landmark. If it contains grouped links, give each group a heading and wrap them in a <nav> with a label.
- Keep the year current automatically
- Compute the copyright year with new Date().getFullYear() instead of hard-coding it. In SSR this runs on the server, which is fine for a year value.
- Collapse columns thoughtfully
- Link columns usually go from four across to two across on small screens with grid-cols-2 md:grid-cols-4. Avoid accordions for footer links unless there are many groups.
- Label icon-only links
- Social icons need an accessible name, either an aria-label on the link or visually hidden text, and the SVG itself should have aria-hidden="true".
FAQ
Questions
Can I use the newsletter form in a footer with my own email provider?
Yes. The form emits the submitted email or posts to a URL you provide, so you can wire it to any provider or your own API.
How do I install a footer component?
Every item is a plain Vue 3 single-file component with no dependencies besides vue. Install it with npm from its vueplay.com/npm tarball URL, or copy the source straight into your project.