vue-nav-tabs

import { createApp } from 'vue'; import { VueTabs, VTab } from 'vue-nav-tabs'; // Import one of the themes, e.g., 'material' import 'vue-nav-tabs/themes/material.css'; const app = createApp({ data() { return { currentTab: 'First Tab', tabs: [ { name: 'First Tab', content: 'Content for the first tab.' }, { name: 'Second Tab', content: 'Content for the second tab.' }, { name: 'Third Tab', content: 'Content for the third tab.' } ] }; }, template: ` <div> <vue-tabs v-model="currentTab"> <v-tab v-for="tab in tabs" :key="tab.name" :title="tab.name"> {{ tab.content }} </v-tab> </vue-tabs> <button @click="addTab">Add Tab</button> <button @click="removeTab">Remove Last Tab</button> </div> `, methods: { addTab() { const newTabIndex = this.tabs.length + 1; this.tabs.push({ name: `Tab ${newTabIndex}`, content: `Dynamic content for Tab ${newTabIndex}.` }); }, removeTab() { if (this.tabs.length > 0) { this.tabs.pop(); } } } }); app.component('VueTabs', VueTabs); app.component('VTab', VTab); app.mount('#app');