How to create a tab in VueJS?
April 02, 2023Hi Friends đź‘‹,
Welcome To SortoutCode! ❤️
To create a tab we are going to use the button
for the tab
and use on v-on:click
event to show the tab content.
Today I am going to show you How do you create a tab in VueJS?
Table of contains
- Setup the Vue.js
- Create FirstComponent.vue and import it into App.js
- Create a custom tab
- Add tab using Bootstrap
Let’s start today’s tutorial How do I create a tab in VueJS?
Setup the Vue.js
First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation.
How to Install the VueJS project?
Create FirstComponent.vue and import it into App.js
Create the new component in the src/components/
components folder. the component name is FirstComponent.vue
and imported into the App.js
file:
App.js
<template>
<div id="app">
<FirstComponent />
</div>
</template>
<script>
import FirstComponent from "./components/FirstComponent.vue";
export default {
name: "App",
components: {
FirstComponent,
},
};
</script>
Create a custom tab
The tab is the most used component in the UI. The tab is the functionality where we access the different content without changing the page. To create the custom tab we are going to use v-if
, @click
, ternary operator
, and props
. We are going to make two components.
The first component is FirstComponent.vue
for the tab buttons. Let’s check the code.
FirstComponent.vue
<template>
<div>
<h1>Welcome to sortoutcode.com</h1>
<div class="tab">
<button
:class="activeTab == 'First Tab' ? 'tablinks active' : 'tablinks'"
@click="openCity('First Tab')"
>
First Tab
</button>
<button
:class="activeTab == 'Second Tab' ? 'tablinks active' : 'tablinks'"
@click="openCity('Second Tab')"
>
Second Tab
</button>
<button
:class="activeTab == 'Third Tab' ? 'tablinks active' : 'tablinks'"
@click="openCity('Third Tab')"
>
Third Tab
</button>
</div>
<Tabcontent v-if="activeTab" :tabData="activeTab" />
</div>
</template>
<script>
import Tabcontent from "./TabContent.vue";
export default {
name: "FirstComponent",
components: {
Tabcontent,
},
data() {
return {
activeTab: "",
};
},
methods: {
openCity(tab) {
this.activeTab = tab;
},
},
};
</script>
<style scoped>
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
</style>
And the second component is TabContent.vue
for the tab content. Let’s check the code.
TabContent.vue
<template>
<div class="tabcontent">
<h3>{{ tabData }}</h3>
<p>This is the content of {{ tabData }}</p>
</div>
</template>
<script>
export default {
name: "TabContent",
props: {
tabData: String,
},
};
</script>
<style lang="stylus" scoped>
.tabcontent {
display: block;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
For now, let’s check the output.
Output

Add tab using Bootstrap
Installation of BootstrapVue
To install the BootstrapVue in your project, you can use these commands.
## With npm
npm install vue bootstrap bootstrap-vue
## With yarn
yarn add vue bootstrap bootstrap-vue
And after the installation is done, we have to register the bootstrap in our project entry point which is main.js
.
import Vue from "vue";
import App from "./App";
import { BootstrapVue } from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
el: "#app",
components: { App },
template: "<App/>",
});
Tab example using the BootstrapVue
To create a tab in bootstrap, we are going to use the <b-tab>
components. To open the tab and close the tab all is managed in the BootstrapVue. Let’s check the code.
FirstComponent.vue
<template>
<div>
<h1>Welcome to sortoutcode.com</h1>
<div>
<b-tabs content-class="mt-3">
<b-tab title="First Tab" active>
<p>This is the content of first tab.</p>
</b-tab>
<b-tab title="Second Tab">
<p>This is the content of second tab.</p>
</b-tab>
<b-tab title="Third Tab">
<p>This is the content of Third tab.</p>
</b-tab>
</b-tabs>
</div>
</div>
</template>
<script>
export default {
name: "FirstComponent",
};
</script>
For now, let’s check the output.
Output

All the best 👍.