How to Use the Vuetify Footer Component
A footer is an area located at the bottom of a web page, after the main content. We can use it to display copyrights, creation dates, and top-level navigation links. In this article, we're going to learn how to use the Vuetify footer component to easily create footers for our web pages.
The Vuetify Footer Component (v-footer)
Vuetify provides the v-footer component for creating a footer. It functions as a container in its simplest form.
<template>
<v-app>
<v-footer>
<v-card
tile
flat
width="100%"
color="indigo"
dark
height="100px"
class="d-flex align-center justify-center"
>
© 2022 Coding Beauty
</v-card>
</v-footer>
</v-app>
</template>
Vuetify Footer Padless
As you can see in the results of the previous example, the footer applies some padding to its content by default. We can use the padless prop to remove it:
<template>
<v-app>
<v-footer padless>
<v-card
tile
flat
width="100%"
color="red accent-2"
dark
height="100px"
class="d-flex align-center justify-center"
>
© 2022 Coding Beauty
</v-card>
</v-footer>
</v-app>
</template>
Vuetify Footer Fixed
Setting the fixed prop to true will make the footer remain in the same position even if the user scrolls the page:
<template>
<v-app>
<v-container>
<v-responsive height="800px">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quisquam possimus aliquid nemo, modi harum rem
laborum odio dicta, cupiditate accusantium debitis
earum vero maxime consequatur nihil. Ut dolor esse
eius. Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Non cum doloribus consectetur,
libero rerum unde magnam beatae ullam asperiores,
harum vero quasi minus animi omnis aliquam sequi,
saepe nihil et!
</v-responsive>
</v-container>
<v-footer
fixed
padless
>
<v-card
tile
flat
width="100%"
color="teal"
dark
height="100px"
class="d-flex align-center justify-center"
>
© 2022 Coding Beauty
</v-card>
</v-footer>
</v-app>
</template>
Footer with Links
We can place links in a footer so that the user can navigate to those locations from any web page.
<template>
<v-app>
<v-footer
color="primary"
dark
>
<v-row
justify="center"
class="my-4 text-center"
>
<v-col cols="12">
<v-btn
href="#"
v-for="link in links"
:key="link"
text
dark
>{{ link }}
</v-btn>
</v-col>
<v-col cols="12">© 2022 Coding Beauty</v-col>
</v-row>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => {
return { links: ['Home', 'Blog', 'About'] };
},
};
</script>
Footer with Social Links
Here's a footer with social media links and some text before the copyright:
<template>
<v-app>
<v-footer
color="green"
dark
>
<v-row
justify="center"
class="my-4 text-center"
>
<v-col cols="12"
>Lorem ipsum dolor sit amet consectetur
adipisicing elit.</v-col
>
<v-col cols="12">
<v-btn
v-for="icon in icons"
:key="icon"
text
dark
>
<v-icon>{{ icon }}</v-icon>
</v-btn>
</v-col>
<v-col
cols="12"
class="align-center"
>© 2022 Coding Beauty</v-col
>
</v-row>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => {
return {
icons: [
'mdi-facebook',
'mdi-twitter',
'mdi-instagram',
'mdi-youtube',
],
};
},
};
</script>
Conclusion
Footers can display general information we want to be accessible from any web page of a website. We can use the Vuetify footer component (v-footer) to create them.
