How to create tabs in Vue.js

A brief tutorial, which shows how to create tabs in Vue.js with Bootstrap (CSS only). I recommend creating your own tabs instead of using third-party NPM-packages because it’s easy and you have full control.

We will first create 3 tabs: Home, Profile and Contact using Bootstrap 4 (CSS only). Let’s copy the following code from the official Bootstrap documentation:

<ul class="nav nav-tabs nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

We won’t be using the compiled bootstrap.js file that Bootstrap comes with. We’ll build a custom logic in Vue.js instead.

Getting started with Vue.js

Let’s start by creating a Vue.js app. You can do that in 3 ways: by including Vue in your existing project:

<script src="https://cdn.jsdelivr.net/npm/vue">

By creating an app using NPM and the package.json file.

Or by using the CLI (command-line interface). If you’re just starting with Vue.js, I recommend the first option.

Create a new div inside the body tag and add an “app” id.

<div id="app"></div>

We now have a working Vue.js application.

Tabs in Vue.js using Bootstrap 4

Let’s modify the code we previously imported from the official Bootstrap documentation.

HTML:

<div id="app">
  <div class="container">
    <h2>Tabs in Vue.js:
    <br>

    <ul class="nav nav-tabs nav-justified">
      <li class="nav-item">
        <a class="nav-link" @click.prevent="setActive('home')" :class="{ active: isActive('home') }" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" @click.prevent="setActive('profile')" :class="{ active: isActive('profile') }" href="#profile">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" @click.prevent="setActive('contact')" :class="{ active: isActive('contact') }" href="#contact">Contact</a>
      </li>
    </ul>
    <div class="tab-content py-3" id="myTabContent">
      <div class="tab-pane fade" :class="{ 'active show': isActive('home') }" id="home">Home content</div>
      <div class="tab-pane fade" :class="{ 'active show': isActive('profile') }" id="profile">Profile content</div>
      <div class="tab-pane fade" :class="{ 'active show': isActive('contact') }" id="contact">Contact content</div>
    </div>
  </div>
</div>

JavaScript:

new Vue({
  el: "#app",
  data: {
    activeItem: 'home'
  },
  methods: {
  	isActive (menuItem) {
      return this.activeItem === menuItem
    },
    setActive (menuItem) {
      this.activeItem = menuItem
    }
  }
})

We declared an activeItem variable and set a default tab “Home”.

There’re two methods: isActive and setActive. The first one returns the currently active tab and the latter sets a new active tab.

As you can see the logic is pretty simple, we pass the tab id (home, profile, contact) to the isActive method to check if it equals to the active tab.

<a class="nav-link" @click.prevent="setActive('home')" :class="{ active: isActive('home') }" href="#home">Home</a>

If the current tab equals to the activeItem we use Bootstrap class to highlight it (e.g. ‘active’).

<div class="tab-pane fade" :class="{ 'active show': isActive('home') }" id="home">Home content</div>

The same logic with the content, note the 2 classes ‘active’ and ‘show’. If the current tab isActive we show its content.

JSFiddle Tabs in Vue.js example:

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-tabs

PS: Make sure you check other Vue.js tutorials, e.g. how to get the last item in Vue.js array.

Incoming search terms: