Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Toolbars
We can add toolbars with the v-toolbar
component.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar prominent extended>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to add a toolbar with the v-toolbar
component.
v-app-bar-nav-icon
to add the nav icon.
v-toolbar-title
lets us add the title.
v-space
lets us add spacing to the toolbar items,
v-btn
lets us add the buttons.
Dense Toolbars
We can add the dense
prop to the v-toolbar
to make it denser.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar dense>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
to make the toolbar shorter.
Dark Variant
To make the toolbar show with a black background, we can add the dark
prop;
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar dark>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-reply</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Background Color
We can also change the background color of the toolbar.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-card color="grey lighten-4" flat height="200px" tile>
<v-toolbar color="primary" dark>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-reply</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the color
prop set to primary
to make it blue.
And we add the dark
prop to make the icons white.
Prominent Toolbar with Background
We can add a toolbar with a background image.
For example, we can write:
<template>
<v-container>
<v-row class="text-center">
<v-col col="12">
<v-toolbar dark prominent src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-export</v-icon>
</v-btn>
</v-toolbar>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
We have the v-toolbar
component with the dark
and prominent
props to change the background color.
src
sets the URL of the image.
Conclusion
We can add toolbars with various colors, sizes, and a background image.