Vuetify — Tabs with Other Components

Image for post
Image for post
Photo by Mike Benna 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.

Align Tabs with Toolbar Title

We can align tabs with the toolbar title.

To do that, we write:

<template>
<v-card>
<v-toolbar color="cyan" dark flat>
<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-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
<template v-slot:extension>
<v-tabs v-model="tab" centered slider-color="yellow" align-with-title>
<v-tab v-for="i in 3" :key="i" :href="`#tab-${i}`">Item {{ i }}</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="tab">
<v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`">
<v-card flat>
<v-card-text v-text="'hello world'"></v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
};
},
};
</script>

We add the align-with-title prop to align the title with toolbar title.

Dynamic Tabs

We can add tabs that can be dynamically added or removed.

For example, we can write:

<template>
<v-card>
<v-tabs v-model="tab" background-color="red lighten-2" dark>
<v-tab v-for="n in length" :key="n">Item {{ n }}</v-tab>
</v-tabs>
<v-card-text class="text-center">
<v-btn text @click="length--">Remove Tab</v-btn>
<v-divider class="mx-4" vertical></v-divider>
<v-btn text @click="length++">Add Tab</v-btn>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
length: 10,
tab: null,
}),
watch: {
length(val) {
this.tab = val - 1;
},
},
};
</script>

We change the length state to add or remove tabs.

We can do that because we’re using length to render the number of tabs with v-for .

Also, we watch the length so that we change to the last tab once a tab is added or removed.

With Search

We can also add tabs with a search box.

To do that, we write:

<template>
<v-card>
<v-toolbar color="purple" dark flat prominent>
<v-text-field
append-icon="mic"
class="mx-4"
flat
hide-details
label="Search"
prepend-inner-icon="search"
solo-inverted
></v-text-field>
<template v-slot:extension>
<v-tabs v-model="tabs" centered>
<v-tab v-for="n in 3" :key="n">Item {{ n }}</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="tabs">
<v-tab-item>
<v-card flat>
<v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card flat>
<v-card-title class="headline">Title</v-card-title>
<v-card-text>
<p>Duis lobortis massa imperdiet quam.</p>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card flat>
<v-card-title class="headline">Title</v-card-title>
<v-card-text>
<p>Maecenas ullamcorpe.</p>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
tabs: null,
text: "Lorem ipsum dolor sit amet.",
}),
};
</script>

The v-text-field is added above the extension slot so that we can see the search box above the tabs.

Conclusion

Tabs can be added to toolbars and added with other elements.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/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