{"id":12594,"library":"vue-tabs-component","title":"Vue Tabs Component","description":"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.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/spatie/vue-tabs-component","tags":["javascript","spatie"],"install":[{"cmd":"npm install vue-tabs-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tabs-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tabs-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue.js is a peer dependency required for component rendering.","package":"vue","optional":false}],"imports":[{"note":"Use this named import for individual component registration or local component usage.","wrong":"const Tabs = require('vue-tabs-component').Tabs;","symbol":"Tabs","correct":"import { Tabs } from 'vue-tabs-component';"},{"note":"Use this named import for the child component (`<tab>`) when registering components individually.","wrong":"const Tab = require('vue-tabs-component').Tab;","symbol":"Tab","correct":"import { Tab } from 'vue-tabs-component';"},{"note":"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.","wrong":"import { Tabs } from 'vue-tabs-component'; Vue.use(Tabs);","symbol":"VueTabsPlugin","correct":"import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);"}],"quickstart":{"code":"import Vue from 'vue';\nimport { Tabs, Tab } from 'vue-tabs-component'; // Alternatively: import VueTabsPlugin from 'vue-tabs-component'; Vue.use(VueTabsPlugin);\n\n// Register components globally\nVue.component('tabs', Tabs);\nVue.component('tab', Tab);\n\nnew Vue({\n  el: '#app',\n  methods: {\n    tabClicked(event) {\n      console.log(`Tab clicked: ${event.tab.name}`);\n    },\n    tabChanged(event) {\n      console.log(`Tab changed to: ${event.tab.name}`);\n    }\n  },\n  template: `\n    <div id=\"app\">\n      <tabs :options=\"{ useUrlFragment: false }\" @clicked=\"tabClicked\" @changed=\"tabChanged\" cache-lifetime=\"10\">\n          <tab name=\"First Tab Example\">\n              <p>This is the content of the first tab, demonstrating basic functionality and event handling.</p>\n          </tab>\n          <tab name=\"Second Tab Example\">\n              <p>This tab showcases more content. You can also disable a tab using the :is-disabled prop.</p>\n          </tab>\n          <tab name=\"Disabled Tab\" :is-disabled=\"true\">\n              <p>This content will be unavailable while :is-disabled prop set to true. Users cannot select this tab.</p>\n          </tab>\n          <tab id=\"custom-fragment-tab\" name=\"Custom URL Fragment\">\n              <p>The URL fragment can be customized for direct linking. E.g., #custom-fragment-tab.</p>\n          </tab>\n      </tabs>\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates global registration and basic usage of the `<tabs>` and `<tab>` components with custom content, event handling, and options."},"warnings":[{"fix":"Pass `:options=\"{ useUrlFragment: false }\"` to the `<tabs>` component to explicitly disable URL fragment modification.","message":"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.","severity":"gotcha","affected_versions":">=1.2.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"},{"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);`","message":"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).","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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);`.","cause":"The `<tabs>` or `<tab>` component was not properly registered with Vue before being used in a template.","error":"Unknown custom element: `<tabs>` - did you register the component correctly?"},{"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);`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'install')"}],"ecosystem":"npm"}