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>
    <b-tabs small card ref="tabs" v-model="tabIndex">
      <b-tab title="General" icon=https://www.google.com/imgres?imgurl=https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Noto_Emoji_KitKat_263a.svg/1200px-Noto_Emoji_KitKat_263a.svg.png&imgrefurl=https://en.wikipedia.org/wiki/Emoji&h=1200&w=1200&tbnid=dA54YxVSwDjYBM:&q=Emoji&tbnh=186&tbnw=186&usg=AI4_-kTT8fyXGM85n_wUfqXlgBghxlJe9Q&vet=12ahUKEwilpJCbm7jfAhVzgM4BHUFyAm0Q_B0wEnoECAsQCQ..i&docid=vCF8Ph8K8-It9M&itg=1&sa=X&ved=2ahUKEwilpJCbm7jfAhVzgM4BHUFyAm0Q_B0wEnoECAsQCQ>
        I'm the first fading tab
      </b-tab>
      <b-tab title="Edit profile">
        I'm the second tab
        <b-card>I'm the card in tab</b-card>
      </b-tab>
      <b-tab title="Premium Plan" disabled>
        Sibzamini!
      </b-tab>
    </b-tabs>

  </b-card>

  <!-- Control buttons-->
  <div class="text-center">
    <b-button-group class="mt-2">
      <b-btn @click="$refs.tabs.previousTab()">Previous</b-btn>
      <b-btn @click="$refs.tabs.nextTab()">Next</b-btn>
    </b-button-group>
    <br>
    <span class="text-muted">Current Tab: {{tabIndex}}</span>
  </div>

  <br>
  <br>

  <!-- Example #2 -->

  <b-card no-block>
    <b-tabs card>
      <!-- Render Tabs -->
      <b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="i">
        Tab Contents {{i}}
        <b-btn size="sm" variant="danger" class="float-right" @click="()=>closeTab(i)">Close tab
        </b-btn>
      </b-tab>

      <!-- Newtab Button (Using tabs slot) -->
      <b-nav-item...

CSS

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

JavaScript

window.app = new Vue({
  el: '#app',
  data: {
    tabIndex: null,
    tabs: [],
    tabCounter: 0
  },
  methods: {
    closeTab(x) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i] === x) {
            this.tabs.splice(i, 1);
          }
        }
      },
      newTab() {
        this.tabs.push(this.tabCounter++);
      }
  }
});