Image for post
Image for post
Photo by Austin Distel 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.

Tabs

We can add tabs to our Vuetify app with the v-tabs component.

For example, we can write:

<template>
<v-tabs fixed-tabs background-color="indigo" dark>
<v-tab>One</v-tab>
<v-tab>Two</v-tab>
<v-tab>Three</v-tab>
</v-tabs>
</template>
<script>
export default {
name: "HelloWorld",
};
</script>

to show tabs.

background-color has the background color.

fixed-tabs makes its position fixed.

dark makes the text of the non-active tabs gray.

The active tab is always centered.

Tab Items

We can add the v-tab-items component to let us customize the content per tab.

For example, we can write:

<template>
<v-card>
<v-tabs v-model="tab" background-color="primary" dark>
<v-tab v-for="item in items" :key="item.tab">{{ item.tab }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.tab">
<v-card flat>
<v-card-text>{{ item.content }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
items: [
{ tab: "One", content: "Tab 1 Content" },
{ tab: "Two", content: "Tab 2 Content" },
{ tab: "Three", content: "Tab 3 Content" },
{ tab: "Four", content: "Tab 4 Content" },
{ tab: "Five", content: "Tab 5 Content" },
],
};
},
};
</script>

to add tabs and populate the headings and content.

v-tab has the tab headings and v-tab-items has the tab items.

The tab state has the index of the active tab.

v-model lets us control which tab is active programmatically.

We just render all the tab content with the v-tab-item component and the right one will be displayed automatically.

Grow Tabs

We can add the grow prop to make the tag items take up all available space up to a max-width of 300px:

<template>
<v-card>
<v-tabs v-model="tab" background-color="primary" grow dark>
<v-tab v-for="item in items" :key="item.tab">{{ item.tab }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.tab">
<v-card flat>
<v-card-text>{{ item.content }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
items: [
{ tab: "One", content: "Tab 1 Content" },
{ tab: "Two", content: "Tab 2 Content" },
{ tab: "Three", content: "Tab 3 Content" },
{ tab: "Four", content: "Tab 4 Content" },
{ tab: "Five", content: "Tab 5 Content" },
],
};
},
};
</script>

We have the grow prop to make it grow to fix the screen.

Pagination

The show-arrows prop will make the arrow display so that we can scroll through the tabs:

<template>
<v-card>
<v-tabs v-model="tab" background-color="primary" show-arrows dark>
<v-tab v-for="item in items" :key="item.tab">{{ item.tab }}</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item v-for="item in items" :key="item.tab">
<v-card flat>
<v-card-text>{{ item.content }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
tab: null,
items: [
{ tab: "One", content: "Tab 1 Content" },
{ tab: "Two", content: "Tab 2 Content" },
{ tab: "Three", content: "Tab 3 Content" },
{ tab: "Four", content: "Tab 4 Content" },
{ tab: "Five", content: "Tab 5 Content" },
],
};
},
};
</script>

The arrows will show when the tabs overflow the page.

Conclusion

We can add tabs with the v-tabs and tab content with the v-tab-item component.

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