Modern Customizable Tabbed Interface – Super Vue 3 Tabs

Install & Download:

# Yarn
$ yarn add super-vue3-tabs
# NPM
$ npm install super-vue3-tabs

Description:

A Vue 3 tabs component to add a stylish, dynamic, customizable tabbed interface to your Vue apps.

How to use it:

1. Import the needed components into your project.

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

2. Add a tabbed interface to the template.

<template>
  <Tabs>
    <Tab value="Tab 1">
      <p>Tab 1</p>
    </Tab>
    <Tab :disabled="true" value="Tab 2">
      <p>TTab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <p>Tab 3</p>
    </Tab>
  </Tabs>
</template>

3. Add custom icons to tabs using the icon slot.

<template>
  <Tabs>
    <Tab value="Tab 1">
      <template #icon>
        Any Icon Here
      </template>
      <p>Tab 1</p>
    </Tab>
    <Tab :disabled="true" value="Tab 2">
      <template #icon>
        Any Icon Here
      </template>
      <p>TTab 2</p>
    </Tab>
    <Tab value="Tab 3">
      <template #icon>
        Any Icon Here
      </template>
      <p>Tab 3</p>
    </Tab>
  </Tabs>
</template>

4. Available component props.

// tabs props
themeColor: "#3b82f6",
// tab props
id?: string;
value: string;
disabled?: boolean;

5. Events.

• @change: when the current tab has changed.

Preview: