Registry / web-framework / vue-tabs-component

vue-tabs-component

library1.5.0jsnpmunverified

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.

web-framework

npm install vue-tabs-component

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TABS-COMPONENT

vue-tabs-component

web-frameworkjavascriptv1.5.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Tabs

✓ import { Tabs } from 'vue-tabs-component';

✗ const Tabs = require('vue-tabs-component').Tabs;

Use this named import for individual component registration or local component usage.

Tab

✓ import { Tab } from 'vue-tabs-component';

✗ const Tab = require('vue-tabs-component').Tab;

Use this named import for the child component (`<tab>`) when registering components individually.

VueTabsPlugin

✓ import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);

✗ import { Tabs } from 'vue-tabs-component'; Vue.use(Tabs);

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.

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> ` });

Debug

Known issues

gotchaBy 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.

affects: >=1.2.0

gotchaThe 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.

affects: *

gotchaAttempting 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);`

affects: *

Errors

Common errors & fixes

Unknown custom element: `<tabs>` - did you register the component correctly?

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')

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);`.

Upgrade

Version history

1.5.0latest on npm

Audit

Dependencies

vuerequiredVue.js is a peer dependency required for component rendering.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/spatie/vue-tabs-component ↗

packagehttps://www.npmjs.com/package/vue-tabs-component ↗