Super Vue 3 Tabs Component

A Vue 3 component for creating tabbed interfaces easily.

Try live demo here. If you face any issue, please raise it here.

Installation

npm i super-vue3-tabs

or use yarn

yarn add super-vue3-tabs

Usage

In your Vue 3 project, import the component where you need to use it:

import { Tabs, Tab } from 'super-vue3-tabs';

Tabs Component - The Tabs component wraps your tab elements. It manages the state of the tabs and their content.

Tab Component - The Tab component represents each individual tab. It requires a title prop for the tab title and can contain any content.

<template>
  <Tabs>
    <Tab value="Tab 1">
      <p>This is the content of Tab 1</p>
    </Tab>
    <Tab :disabled="true" value="Tab 2">
      <p>This is the content of Tab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <p>This is the content of Tab 3</p>
    </Tab>
  </Tabs>
</template>

<script setup>
import { Tabs, Tab } from 'super-vue3-tabs'
</script>

Icon slots

You can also pass icons to the tabs using the icon slot. The icon will be displayed before the tab title.

<template>
  <Tabs>
    <Tab value="Tab 1">
      <template #icon>
        <i class="fas fa-home"></i>
      </template>
      <p>This is the content of Tab 1</p>
    </Tab>
    <Tab value="Tab 2">
      <template #icon>
        <i class="fas fa-user"></i>
      </template>
      <p>This is the content of Tab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <template #icon>
        <i class="fas fa-cog"></i>
      </template>
      <p>This is the content of Tab 3</p>
    </Tab>
  </Tabs>

Using Event & V-model

You can use the change event to listen to tab changes and the v-model to bind the active tab value.

<template>
  <Tabs @change="tabChanged" v-model="activeTab">
    <Tab value="Tab 1">
      <p>This is the content of Tab 1</p>
    </Tab>
    <Tab value="Tab 2">
      <p>This is the content of Tab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <p>This is the content of Tab 3</p>
    </Tab>
  </Tabs>
</template>

<script setup>
import { Tabs, Tab } from 'super-vue3-tabs'

const activeTab = ref('Tab 1')

const tabChanged = (tab) => {
  console.log('Tab changed to', tab)
}
</script>

Props

Tabs Component

| Prop | Type | Default | Description | | --- | --- | --- | --- | | v-model | String | - | Current Tab's value | | themeColor | String | #3b82f6 | Theme color of the tab, pass hexcode for custom color |

Tab Component

| Prop | Type | Default | Description | | --- | --- | --- | --- | | value | String | - | The title of the tab. | | disabled | Boolean | false | Whether the tab is disabled. | | id | String | - | The html id of the tab. |

Events

Tabs Component

| Event | Description | | --- | --- | | change | Emitted when the active tab changes. The event payload is the index of the new active tab. |

Tab Component

TODO: add event for tab