Accessible Tabs Component For Vue 3

A simple lightweight tabs component for Vue.js 3 applications, built with accessibility in mind.

It actively tries to avoid visual duplicates and has proper keyboard interactions. For example, using keyboard navigation to switch tabs is great for screen reader users.

The tabs component uses the fragment of the URL to choose which tab to open. It also remembers which tab was opened previously. If you reload without fragment the tab that is currently active will receive focus again.

How to use it:

1. Import the component and register it globally.

import { createApp } from 'vue'
import {Tabs, Tab} from 'vue3-tabs-component';
createApp(App)
  .component('tabs', Tabs)
  .component('tab', Tab)
  .mount('#app')

2. Or locally.

import Vue from 'vue';
import {Tabs, Tab} from 'vue3-tabs-component';
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

3. Add the tabs component to the template.

<div>
  <tabs :options="{ useUrlFragment: false }" @clicked="tabClicked" @changed="tabChanged" nav-item-class="nav-item" cache-lifetime="10">
    <tab name="First tab">
      Tab 1
    </tab>
    <tab name="Second tab">
      Tab 2
    </tab>
    <tab name="Disabled tab" :is-disabled="true">
      Disabled Tab
    </tab>
    <tab id="my-fragment" name="Custom fragment">
      Custom Fragment
    </tab>
    <tab prefix="<span class='glyphicon glyphicon-star'></span> " 
       name="Prefix and suffix" 
       suffix=" <span class='badge'>4</span>">
      A prefix and a suffix can be added
    </tab>
  </tabs>
</div>

export default {
  methods: {
    tabClicked (selectedTab) {
      console.log('Current tab re-clicked:' + selectedTab.tab.name)
    },
    tabChanged (selectedTab) {
      console.log('Tab changed to:' + selectedTab.tab.name)
    }
  }
}

4. Available props for the tabs.

cacheLifetime: {
  type: Number,
  default: 5,
},
options: {
  type: Object,
  required: false,
  default: () => ({
    useUrlFragment: true,
    defaultTabHash: null,
    disableScrollBehavior: false,
  }),
},
wrapperClass: {
  type: String,
  default: 'tabs-component'
},
panelsWrapperClass: {
  type: String,
  default: 'tabs-component-panels'
},
navClass: {
  type: String,
  default: 'tabs-component-tabs'
},
navItemClass: {
  type: String,
  default: 'tabs-component-tab'
},
navItemDisabledClass: {
  type: String,
  default: 'is-disabled'
},
navItemActiveClass: {
  type: String,
  default: 'is-active'
},
navItemLinkClass: {
  type: String,
  default: 'tabs-component-tab-a'
},
navItemLinkActiveClass: {
  type: String,
  default: 'is-active'
},
navItemLinkDisabledClass: {
  type: String,
  default: 'is-disabled'
},

5. Available props for the tab.

panelClass: {
  type: String,
  default: 'tabs-component-panel'
},
id: {
  type: String,
  default: null
},
name: {
  type: String,
  required: true
},
prefix: {
  type: String,
  default: ''
},
suffix: {
  type: String,
  default: ''
},
isDisabled: {
  type: Boolean,
  default: false
},

Preview:

Changelog:

v1.3.6 (09/03/2023)

• Bugfix

v1.3.5 (09/03/2023)

• Refactor Tab & Tabs component prop definitions to TypeScript
• Add id & options.storageKey props to Tabs component, which are used when remembering last opened tab

v1.3.4 (07/31/2023)

• Fix prop shape for all custom class props to allow for regular Vue class prop shape (string, array, object)
• Add support for setting custom class for navigation item & navigation item link of a Tab

v1.3.2 (04/09/2023)

• Bugfix

v1.3.1 (04/08/2023)

• Disable caching if cache-lifetime is set as 0

v1.3.0 (04/08/2023)

• Refactor package to TypeScript

v1.2.1 (03/19/2023)

• Added paneId which adds ‘-pane’ to computedId so it doesn’t clash with the computedId naming and functionality.

v1.1.4 (01/25/2023)

• Bugfix

v1.1.2 (12/08/2022)

• Added classes for inactive tabs & inactive tab links

v1.1.1 (10/19/2022)

• Add support for disabling scroll behavior on tabs component via a new prop `disableScrollBehavior`

v1.0.12 (07/10/2022)

• Replace webpack with Vite.js for faster package bundling & development
• Add proper dist compilation as ES & UMD – files renamed to dist/vue3-tabs-component.es.js & dist/vue3-tabs-component.umd.js
• Enable ESLint

v1.0.11 (07/05/2022)

• Add module, unpkg definitions

v1.0.9 (07/04/2022)

• Add UMD version

v1.0.8 (05/15/2022)

• Fix server side rendering for Tabs component to use the window object after mounting

v1.0.7 (04/24/2022)

• Fix tab active state persistence when a Tab’s props are changed

Download Details:

Author: Jacobs63

Live Demo: https://tabs-component.jakubpotocky.sk/

Download Link: https://github.com/Jacobs63/vue3-tabs-component/archive/refs/heads/master.zip

Official Website: https://github.com/Jacobs63/vue3-tabs-component

Install & Download: