Reusable VUE TABS Component

Tab.vue：

<template>
  <div v-show="isActive">
<slot></slot>
  </div>
</template>

<script>
export default {
props:{
name:{required:true},
selected:{default:false}
},
data() {
return { isActive: false }
},
mounted(): {
this.isActive= !this.selected; }
}
};
</script>
<style scoped>

</style>

 

---

Tabs.vue：

<template>
<article>

<header class="tabs">
<ul>
<li v-for="(tab, index) in tabs" :key="index">
<div class="nav-item" :class="{'is-Active':tab.isActive}" @click="selectTab(tab)">
{{tab.name}}
</div>
</li>
</ul>
</header>

<section class="tabs-details">
<slot></slot>
</section>

</article>

</template>
<script>
export default {
data() {
return { tabs:[] }
},
created(): {
this.tabs=this.$children;
},
methods: {
selectTab(selectedTab){
this.tabs.forEach(tab=>{
tab.isActive = tab.name === selectedTab.name;
});
}
}
}
</script>

<style scoped>
.tabs{border-bottom:1px solid #fff;margin:0 10px;}
.tabs-details{padding:10px}
ul{display:flex;padding:0;list-style:none}
li{margin-right:30px}
.nav-item{cursor:pointer;}
&:hover{color:#fb13fb}

& .is-active{color:#fb13f0A}
</style>

---

app.vue：

<template>
  <div id="app">
<Tabs>
<Tab name="description" selected="true">
<p>sdfsd sdfsdf sdfsdfsd</p>
</Tab>

<Tab name="list">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</Tab>

<Tab name="tab">
<table>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
<tr>
<td>Name 1</td>
<td>Value 1</td>
</tr>
<tr>
<td>Name 2</td>
<td>Value 2</td>
</tr>
</table>
</Tab>
</Tabs>
</div>
</template>

<script>
import Tab from @/components/Tab.vue,
import Tabs from @/components/Tabs.vue,

export default {
name:'app',
components:{Tab,Tabs},
  data() {
    return { }
  },
};
</script>
<style scoped>

</style>