Sortout Code

How to create a tab in VueJS?

April 02, 2023

Hi 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

create custom tab

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

create custom tab

All the best đź‘Ť.

Follow me on Twitter