Vuetify — Badges and Banners

Photo by LSE Library on Unsplash

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Badges

The v-badge component lets us add an avatar-like icon or text onto the component to highlight information to the user.

They appear as superscripts or subscripts.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-toolbar>
<v-tabs dark background-color="primary" grow>
<v-tab>
<v-badge color="pink" dot>One</v-badge>
</v-tab>
<v-tab>
<v-badge color="green" content="6">Two</v-badge>
</v-tab>
<v-tab>
<v-badge color="deep-purple accent-4" icon="mdi-vuetify">Three</v-badge>
</v-tab>
</v-tabs>
</v-toolbar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
alert: false,
}),
};
</script>

We add badges to tab links with the v-tab component.

The color can be changed with the color prop.

icon lets us change the icon.

Show Badge on Hover

We can make a badge shows on hover with the v-hover component.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-badge
:value="hover"
color="deep-purple accent-4"
content="1000"
left
transition="slide-x-transition"
>
<v-hover v-model="hover">
<v-icon color="grey lighten-1" large>mdi-account-circle</v-icon>
</v-hover>
</v-badge>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
hover: undefined,
}),
};
</script>

to add a badge that shows on hover.

The hover state is controlled by the hover state.

v-model son the v-hover component sets the hover state.

Dynamic Notifications

We can create dynamic notifications with badges.

The content can be controlled with the content prop.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<div>
<v-btn class="mx-1" color="primary" @click="messages++">Send Message</v-btn>
<v-btn class="mx-1" color="error" @click="messages = 0">Clear Notifications</v-btn>
</div>
<v-badge :content="messages" :value="messages" color="green" overlap>
<v-icon large>mdi-email</v-icon>
</v-badge>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
messages: 0,
}),
};
</script>

We have the Send Message button that increments the message state.

This causes the content to update with the latest message value.

Banners

The v-banner component is used as a message for users with 1 to 2 actions.

It can have a single line or multiple lines.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-banner single-line :sticky="sticky">
Hello world.
<template v-slot:actions>
<v-btn text color="deep-purple accent-4">Get Online</v-btn>
</template>
</v-banner>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
sticky: true
}),
};
</script>

We have the v-banner component with the single-line prop to display a single line banner.

The sticky controls whether the banner is sticky or not.

Two-Line Banner

We can add a 2 line banner to store more data.

For example, we can write:

<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-banner>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nec sem id malesuada.
Curabitur lacinia sem et turpis euismod, eget elementum ex pretium.
<template
v-slot:actions
>
<v-btn text color="primary">Dismiss</v-btn>
<v-btn text color="primary">Retry</v-btn>
</template>
</v-banner>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>

to add a longer message.

The actions slot has the action buttons.

Photo by Jonathan Kemper on Unsplash

Conclusion

We can add badges and banners to our app with Vuetify.

Web developer. Subscribe to my email list now at https://thewebdev.info/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store