In this tutorial, we will see badges using vuetifyjs 3 in Vue.js 3 . We will see floating badges, badges dots, Before we begin, you need to install and configure Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Badges Example
1. Vuetify 3 vue 3 dots badge, floating badge using v-badge
component.
Vue
<template>
<div>
<v-badge class="mr-4">
<v-icon icon="mdi-vuetify" size="x-large"></v-icon>
</v-badge>
<v-badge :content="2" class="mr-4">
<v-icon icon="mdi-vuetify" size="x-large"></v-icon>
</v-badge>
<v-badge :content="2" floating class="mr-4">
<v-icon icon="mdi-vuetify" size="x-large"></v-icon>
</v-badge>
<v-badge :content="2" inline class="mr-4">
<v-icon icon="mdi-vuetify" size="x-large"></v-icon>
</v-badge>
</div>
</template>
2. Vuetify 3 Vue 3 create badges with menu, nav, or tabs.
Vue
<template>
<div>
<v-toolbar title="Application" color="grey-lighten-3">
<v-btn stacked>
<v-badge color="error" dot>
<v-icon icon="mdi-newspaper-variant-outline"></v-icon>
</v-badge>
News
</v-btn>
<v-btn stacked>
<v-badge dot color="error">
<v-icon icon="mdi-post"></v-icon>
</v-badge>
Blog
</v-btn>
<v-btn stacked variant="tonal">
<v-icon icon="mdi-login"></v-icon>
Login
</v-btn>
</v-toolbar>
</div>
</template>
3. Vuetify 3 Vue 3 create list with badge icons.
Vue
<template>
<div>
<v-list border class="mx-auto" max-width="280">
<v-list-item link prepend-icon="mdi-inbox-arrow-down" title="Inbox">
<template v-slot:append>
<v-badge color="error" content="6" inline></v-badge>
</template>
</v-list-item>
<v-list-item link prepend-icon="mdi-send" title="Sent Mail"></v-list-item>
<v-list-item link prepend-icon="mdi-delete" title="Trash">
<template v-slot:append>
<v-badge color="info" content="12" inline></v-badge>
</template>
</v-list-item>
<v-list-item link prepend-icon="mdi-alert-circle" title="Spam"></v-list-item>
</v-list>
</div>
</template>
4. Vuetify 3 vue 3 navbar with badge icons.
Vue
<template>
<div>
<v-toolbar color="blue-grey-darken-3">
<v-spacer></v-spacer>
<v-btn class="text-none" stacked>
<v-badge dot color="success">
<v-icon>mdi-home-outline</v-icon>
</v-badge>
</v-btn>
<v-btn class="text-none" stacked>
<v-icon>mdi-account-multiple-outline</v-icon>
</v-btn>
<v-btn class="text-none" stacked>
<v-badge content="9+" color="error">
<v-icon>mdi-store-outline</v-icon>
</v-badge>
</v-btn>
<v-btn class="text-none" stacked>
<v-badge content="2" color="error">
<v-icon>mdi-bell-outline</v-icon>
</v-badge>
</v-btn>
<v-btn class="text-none" stacked>
<v-icon>mdi-menu</v-icon>
</v-btn>
<v-spacer></v-spacer>
</v-toolbar>
</div>
</template>
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,