Convenient and easy way to implement Tabs, Tab lists and Tab Contents within your Vue apps.

Demo *the code used is in the Example below

• Easy to use
• Unlimited number of tabs
• Has some flexibility
• You can include pre-defined styles or add your own

$ yarn add vue-tabsi
# or
$ npm install vue-tabsi

1. Using the components build the desired tabs structure. Using the v-model on the <v-tabs> component change the current tab shown however you want.
2. Add all of the <v-tabs> within the <v-tabs> component and assign a label to them that will be used in the tab list for the corresponding tab.
3. Add the content to each of the <v-tabs> as desired,
4. You are good to go! 🏭

// Example usage within a component
<template>
  <div id="app">
    <v-tabs v-model="currentTabIndex">
      <v-tab label="First Tab">
        <p>
          Hello from the First Tab.
        </p>
      </v-tab>
      <v-tab label="Second Tab">
        <p>
          Hello from the Second Tab.
        </p>
      </v-tab>
    </v-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import { VTab, VTabs } from 'vue-tabsi';

export default {
  components: {
    VTabs,
    VTab
  },

  tabs: {
    firstTab: 0,
    secondTab: 1
  },

  data() {
    return {
      currentTabIndex: this.$options.tabs.firstTab
    };
  }
};
</script>

You can also install the plugin and its sample styles and have these components globally available within all of your vue components.

import Vue from 'vue';
import VueTabsi from 'vue-tabsi';
import 'vue-tabsi/dist/vue_tabsi.css';

Vue.use(VueTabsi);

You can now use <v-tabs> and <v-tab> components anywhere in your Vue app.

There are two components that are included within this package

Tabs Component <v-tabs></v-tabs>

And there is only one event on this component:

Tab Component <v-tab></v-tab>

Reach out to me at one of the following places!

• Website at bangjelkoski.com
• Twitter at @bangjelkoski

• MIT license