Vue Tabs Component

1.5.0 · active · verified Sun Apr 19

The `vue-tabs-component` library provides a lightweight and accessible Vue component for effortlessly rendering tabbed interfaces within Vue 2 applications. Currently stable at version 1.5.0, the package sees periodic updates, with recent releases adding features like the `isDisabled` prop for individual tabs (v1.4.0) and an option to control URL fragment usage (v1.2.0). Its key differentiators include built-in persistence of the last-opened tab across page reloads, configurable via a `cache-lifetime` prop, and the ability to link directly to tabs using URL fragments. Importantly, it offers an option (`useUrlFragment: false`) to disable URL fragment modification, crucial for integration with client-side routers or when deploying multiple tab instances. The component is designed with accessibility in mind, adhering to the ARIA specification for tab interfaces, ensuring a robust user experience. It provides flexible registration methods, allowing developers to either register individual components or use it as a Vue plugin.

Common errors

```
Unknown custom element: `<tabs>` - did you register the component correctly?
```
cause The `<tabs>` or `<tab>` component was not properly registered with Vue before being used in a template.

fix Ensure you have `import { Tabs, Tab } from 'vue-tabs-component'; Vue.component('tabs', Tabs); Vue.component('tab', Tab);` in your main JavaScript file, or used the plugin style `import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);`.
```
TypeError: Cannot read properties of undefined (reading 'install')
```
cause Attempted to use `Vue.use()` with a variable that is not a valid Vue plugin (i.e., it doesn't have an `install` method). This typically happens when trying to `Vue.use()` a named component export instead of the default plugin export.

fix When using `Vue.use()`, ensure you are importing the default export of `vue-tabs-component`, which acts as the plugin: `import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);`.

Warnings

gotcha By default, `vue-tabs-component` modifies the URL fragment to reflect the active tab. This can conflict with client-side routers (e.g., Vue Router) or if multiple tab instances are used on the same page, leading to unexpected navigation behavior.
Fix: Pass `:options="{ useUrlFragment: false }"` to the `<tabs>` component to explicitly disable URL fragment modification.
gotcha The component remembers the last opened tab for 5 minutes by default, persisting across page reloads using local storage. This might lead to unexpected initial tab states if not explicitly configured or disabled, as the tab state might not reset as expected.
Fix: Adjust the cache lifetime with the `cache-lifetime` prop (e.g., `<tabs cache-lifetime="0">` to disable persistence, or `<tabs cache-lifetime="15">` for 15 minutes) or ensure your application logic accounts for this behavior.
gotcha Attempting to use `Vue.use()` with a named export (e.g., `import { Tabs } from 'vue-tabs-component'; Vue.use(Tabs);`) will fail because `Vue.use()` expects a plugin (a default export with an `install` method or an object with an `install` method).
Fix: For plugin-style global registration, use `import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);`. For individual or global component registration using named exports, use `import { Tabs, Tab } from 'vue-tabs-component'; Vue.component('tabs', Tabs); Vue.component('tab', Tab);`

Install

npm install vue-tabs-component npm
yarn add vue-tabs-component yarn
pnpm add vue-tabs-component pnpm

Imports

Tabs
wrong:
```
const Tabs = require('vue-tabs-component').Tabs;
```
correct:
```
import { Tabs } from 'vue-tabs-component';
```
Use this named import for individual component registration or local component usage.
Tab
wrong:
```
const Tab = require('vue-tabs-component').Tab;
```
correct:
```
import { Tab } from 'vue-tabs-component';
```
Use this named import for the child component (`<tab>`) when registering components individually.
VueTabsPlugin
wrong:
```
import { Tabs } from 'vue-tabs-component'; Vue.use(Tabs);
```
correct:
```
import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);
```
The default export of `vue-tabs-component` functions as a Vue plugin, globally registering both `<tabs>` and `<tab>` components. Using `Vue.use()` with a named export will fail.

Quickstart

Demonstrates global registration and basic usage of the `<tabs>` and `<tab>` components with custom content, event handling, and options.

import Vue from 'vue';
import { Tabs, Tab } from 'vue-tabs-component'; // Alternatively: import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);

// Register components globally
Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

new Vue({
  el: '#app',
  methods: {
    tabClicked(event) {
      console.log(`Tab clicked: ${event.tab.name}`);
    },
    tabChanged(event) {
      console.log(`Tab changed to: ${event.tab.name}`);
    }
  },
  template: `
    <div id="app">
      <tabs :options="{ useUrlFragment: false }" @clicked="tabClicked" @changed="tabChanged" cache-lifetime="10">
          <tab name="First Tab Example">
              <p>This is the content of the first tab, demonstrating basic functionality and event handling.</p>
          </tab>
          <tab name="Second Tab Example">
              <p>This tab showcases more content. You can also disable a tab using the :is-disabled prop.</p>
          </tab>
          <tab name="Disabled Tab" :is-disabled="true">
              <p>This content will be unavailable while :is-disabled prop set to true. Users cannot select this tab.</p>
          </tab>
          <tab id="custom-fragment-tab" name="Custom URL Fragment">
              <p>The URL fragment can be customized for direct linking. E.g., #custom-fragment-tab.</p>
          </tab>
      </tabs>
    </div>
  `
});

view raw JSON →