Vue 3 with Vuetify 3 Badges Example

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,