Tabs - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/tabs

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">

  <!-- Example #1 -->

  <!-- Tabs with card integration -->
  <b-card no-block>{{tabIndex}}
    <b-tabs small card ref="tabs" v-model="tabIndex">
      <b-tab title="General">
        I'm the first fading tab
      </b-tab>
      <b-tab title="Edit profile" :disabled="tabIndex < 1">
        I'm the second tab
      </b-tab>
      <b-tab title="Premium Plan" :disabled="tabIndex < 2">
        Sibzamini!
      </b-tab>
    </b-tabs>

  </b-card>
  
  <button @click="tabIndex++">
  Click to toggle disable
  </button>


</div>

CSS

#app {
  padding: 20px;
  height: 500px;
}

JavaScript

window.app = new Vue({
  el: '#app',
  data: {
   
    tabs: [],
    tabCounter: 0,
    disabled: false,
    tabIndex: 0
  },
  methods: {
    
  }
});