Create a Footer in Vue 3 With Vuetify 3

In this tutorial, we will create a footer section using Vuetify.js 3 in Vue.js 3. We’ll include a footer section with social media icons. Before we begin, you need to install and configure Vuetify 3 in Vue 3.

How to Install Vuetify 3 in Vue 3

1. Vuetify 3 Vue 3 basic footer using the v-footer component.

Vue

<template>
  <v-footer>2023 — Vuetify, LLC</v-footer>
</template>

2. Vuetify 3 Vue 3 basic footer with border.

Vue

<template>
  <v-footer border>2023 — Vuetify, LLC</v-footer>
</template>

3. Vuetify 3 Vue 3 footer with links: Home, About Us, Team, Services, Blogs, Contact Us.

Vue

<template>
    <v-footer class="bg-grey-lighten-1">
        <v-row justify="center" no-gutters>
            <v-btn v-for="link in links" :key="link" color="white" variant="text" class="mx-2" rounded="xl">
                {{ link }}
            </v-btn>
            <v-col class="text-center mt-4" cols="12">
                {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
            </v-col>
        </v-row>
    </v-footer>
</template>
<script>
export default {
    data: () => ({
        links: [
            'Home',
            'About Us',
            'Team',
            'Services',
            'Blog',
            'Contact Us',
        ],
    }),
}
</script>

4. Vuetify 3 Vue 3 footer with social media icons.

Vue

<template>
    <v-footer class="bg-indigo-lighten-1 text-center d-flex flex-column">
        <div>
            <v-btn v-for="icon in icons" :key="icon" class="mx-4" :icon="icon" variant="text"></v-btn>
        </div>

        <div class="pt-0">
            Phasellus feugiat arcu sapien...
        </div>

        <v-divider></v-divider>

        <div>
            {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </div>
    </v-footer>
</template>
<script>
export default {
    data: () => ({
        icons: [
            'mdi-facebook',
            'mdi-twitter',
            'mdi-linkedin',
            'mdi-instagram',
        ],
    }),
}
</script>

5. Vuetify 3 Vue 3 footer with social media icons for Facebook, Twitter, LinkedIn, and Instagram.

Vue

<template>
    <v-footer class="d-flex flex-column">
        <div class="bg-teal d-flex w-100 align-center px-4">
            <strong>Get connected with us on social networks!</strong>

            <v-spacer></v-spacer>

            <v-btn v-for="icon in icons" :key="icon" class="mx-4" :icon="icon" variant="plain" size="small"></v-btn>
        </div>

        <div class="px-4 py-2 bg-black text-center w-100">
            {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </div>
    </v-footer>
</template>
<script>
export default {
    data: () => ({
        icons: [
            'mdi-facebook',
            'mdi-twitter',
            'mdi-linkedin',
            'mdi-instagram',
        ],
    }),
}
</script>

Javed sheikh

Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,