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.
this worked like a charm. you are awesome. Keep it up 🙂
Cheers mate!
thank’s a lot!!!!!!!!!!!!!!!!!!!!!!
You’re very welcome!
It really speeded up my business.
I’m glad it helped you!
Man you are a legend!!! Thanks for this
Thanks! I’m glad it worked for you!
I love u dude
Love you back 🙂
Brilliant! works also with vue.js v3 – thanks a lot 😊
You’re very welcome!
Thank you, amazing!!!
Thanks!
but v-if is better than css active
amazing !
keep up the good work dude
Thank you so much for this code. This was really helpful.