Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Banner Icon Click Event
v-banner emits the click:icon event on icon click.
For example, we can listen to it by writing:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-banner single-line @click:icon="alertError">
<v-icon slot="icon" color="warning" size="36">mdi-wifi-strength-alert-outline</v-icon>Unable to verify your Internet connection
<template v-slot:actions>
<v-btn color="primary" text>Connecting Settings</v-btn>
</template>
</v-banner>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
methods: {
alertError() {
alert("error");
},
},
};
</script>
We set the value of click:icon to alertError to display an alert when we click the left icon.
Actions Slot
The actions slot has the dismiss function in its scope so we can dismiss the banner:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-checkbox v-model="v0" label="Visible"></v-checkbox>
<v-banner v-model="v0" single-line transition="slide-y-transition">
No Internet connection
<template v-slot:actions="{ dismiss }">
<v-btn text color="primary" @click="dismiss">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: () => ({
v0: true
}),
};
</script>
We have the v0 state to show control when the banner is shown.
It’ll be shown when it’s true .
dismiss will set to to false .
We set v0 as the value of v-model so we can control the banner.
App Bars
The v-app-bar component lets us add an app bar to our app.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-app-bar color="deep-purple accent-4" dense dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-menu left bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-for="n in 5" :key="n" @click="() => {}">
<v-list-item-title>Item {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have a dense app bar with various items.
The dense prop makes it dense.
v-app-bar-icon adds an icon.
v-toolbar-title adds a title.
v-spacer adds some space.
v-btn adds buttons onto the app var.
v-menu adds a menu. And we have a v-list inside to add the list items.
Conclusion
We can add banners and app bars with Vuetify.
