Simple Vuejs tab

To make a simple VueJS tab that does not need any library just a few lines of html and VueJS

First of you create your js file that could be something like this

Vue.component('tabs', {

    data() {
        return {
            currentTab: 0,


In our HTML we make a unordered

<ul class="list-reset">  
        <a @click="currentTab = 0" href="#">Home</a>
    <li >
        <a @click="currentTab = 1" href="#">Profile</a>
    <li >
        <a @click="currentTab = 2" href="#">Contact</a>

Now we can show and hide the div tags where we need our information

<div v-show="currentTab === 0">First tab</div>  
<div v-show="currentTab === 1">Secound tab</div>  
<div v-show="currentTab === 2">Third tab</div>