Your Tabs component can be defined as:
<div class="main-body f-full f-column">
<Tabs ref="tabs" class="f-full" @tabClose="onTabClose($event)">
<TabPanel title="Home"></TabPanel>
<TabPanel v-for="p in panels" :title="p.title" :closable="true" :key="p.title" bodyCls="f-column">
<component :is="p.component" class="f-full"></component>
</TabPanel>
</Tabs>
</div>
When click on a menu, create a new TabPanel component.
onItemClick(item) {
let index = this.panels.findIndex(p => {return p.title == item.text});
if (index >= 0){
this.$refs.tabs.select(index+1);
return;
}
this.panels.push({
title: item.text,
component: item.component
});
this.$nextTick(() => {
this.$refs.tabs.select(this.panels.length);
})
},
onTabClose(panel){
this.panels = this.panels.filter(p => p.title != panel.title);
}