{"id":12402,"library":"vue-badger-accordion","title":"Vue Badger Accordion","description":"This package provides a Vue 2.x component wrapper for the standalone `badger-accordion` library. It enables developers to easily integrate accessible accordion UI elements into their Vue 2 applications. The current stable version is 2.0.2, which primarily focuses on minor bug fixes and feature additions for the Vue 2 ecosystem. This package is a direct wrapper, exposing most of the underlying `badger-accordion` library's options, methods, and events, differentiating it by providing a thin Vue layer rather than a re-implementation. Its release cadence appears to be slow, consistent with its role as a wrapper for an external library and its ties to Vue 2. It offers flexibility for custom state indicators and event handling, making it suitable for projects requiring a highly customizable Vue 2 accordion solution.","status":"maintenance","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/vanderb/vue-badger-accordion","tags":["javascript","vue","accordion","collapse","badger"],"install":[{"cmd":"npm install vue-badger-accordion","lang":"bash","label":"npm"},{"cmd":"yarn add vue-badger-accordion","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-badger-accordion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it is a Vue 2 component.","package":"vue","optional":false},{"reason":"Core runtime dependency providing the underlying accordion logic and functionality.","package":"badger-accordion","optional":false}],"imports":[{"note":"Primary component for the accordion container, typically registered globally or locally in a Vue 2 application.","wrong":"const BadgerAccordion = require('vue-badger-accordion').BadgerAccordion","symbol":"BadgerAccordion","correct":"import { BadgerAccordion } from 'vue-badger-accordion'"},{"note":"Child component representing an individual accordion section. Must be used within a `BadgerAccordion` parent.","wrong":"const BadgerAccordionItem = require('vue-badger-accordion').BadgerAccordionItem","symbol":"BadgerAccordionItem","correct":"import { BadgerAccordionItem } from 'vue-badger-accordion'"},{"note":"When globally registering components in Vue 2, use `Vue.component`. Named imports are correct for bringing components into scope for local registration.","wrong":"import BadgerAccordion from 'vue-badger-accordion'","symbol":"Vue component registration","correct":"Vue.component('BadgerAccordion', BadgerAccordion)"}],"quickstart":{"code":"import Vue from 'vue';\nimport { BadgerAccordion, BadgerAccordionItem } from 'vue-badger-accordion';\n\n// Option 1: Global registration (common in smaller apps or plugins)\nVue.component('BadgerAccordion', BadgerAccordion);\nVue.component('BadgerAccordionItem', BadgerAccordionItem);\nconsole.log('BadgerAccordion and BadgerAccordionItem globally registered.');\n\n// Option 2: Local registration (common in component-based apps)\n// In a typical Vue SFC (<script> section of a .vue file), you would do:\nconst MyAccordionParentComponent = {\n  template: `\n    <badger-accordion>\n      <badger-accordion-item>\n        <template slot=\"header\">Item 1 Header</template>\n        <template slot=\"content\">Item 1 Content</template>\n      </badger-accordion-item>\n    </badger-accordion>\n  `,\n  components: {\n    BadgerAccordion,\n    BadgerAccordionItem\n  }\n};\nconsole.log('BadgerAccordion and BadgerAccordionItem are available for local registration in Vue components.');\n\n// This code demonstrates the import and registration process.\n// To see a full example, you would integrate this into a Vue 2 application with an HTML template.","lang":"typescript","description":"This quickstart demonstrates the two primary methods for integrating `BadgerAccordion` and `BadgerAccordionItem` components into a Vue 2 application: global registration via `Vue.component` and local registration within another Vue component's `components` option, preparing them for use in your templates."},"warnings":[{"fix":"For Vue 3 projects, seek a dedicated Vue 3 accordion component or a Vue 3 compatible version of badger-accordion if one exists.","message":"This package is explicitly built for Vue 2.x. It is not compatible with Vue 3.x due to significant changes in Vue's component API and rendering mechanisms (e.g., slots, global registration).","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Refer to the original `badger-accordion` GitHub repository at https://github.com/stuartjnelson/badger-accordion for options and methods documentation.","message":"The configuration options and methods for `BadgerAccordion` and `BadgerAccordionItem` are directly inherited from the underlying `badger-accordion` library. Users must consult the `badger-accordion` repository documentation for a complete list of available options and methods, as they are not exhaustively documented within `vue-badger-accordion` itself.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Continue using the `slot=\"header\"` and `slot=\"content\"` attributes with `<template>` tags within this component in Vue 2 projects. No change needed for this package, but be mindful of Vue 3 slot syntax (`v-slot`) for future projects.","message":"Vue 2's slot syntax using `slot=\"name\"` is considered legacy in Vue 3. While valid for this Vue 2 wrapper, developers transitioning to Vue 3 should be aware that the `v-slot` directive is the current standard. This package uses the Vue 2 slot syntax for header and content.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"For simple icons, pass HTML strings like `<i class=\"fas fa-chevron-down\"></i>`. For advanced scenarios, define a Vue component with an 'opened' prop and pass its name to the `iconComponent` prop.","message":"The default state indicators are simple '+' and '-'. To use custom icons or components, ensure the provided string is valid HTML/SVG or that the `iconComponent` prop correctly points to a registered Vue component, as shown in the advanced example.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you either call `Vue.component('BadgerAccordion', BadgerAccordion)` and `Vue.component('BadgerAccordionItem', BadgerAccordionItem)` globally, or include them in the `components` option of your parent component.","cause":"The `BadgerAccordion` or `BadgerAccordionItem` components were not registered with Vue globally or locally before being used in a template.","error":"[Vue warn]: Unknown custom element: <badger-accordion> - did you register the component correctly?"},{"fix":"Add a `ref=\"myAccordion\"` attribute to your `<badger-accordion>` component and ensure you access its methods only after the component is mounted, for instance, in a `mounted()` lifecycle hook: `this.$refs.myAccordion.open(0)`.","cause":"The `ref` attribute on `<badger-accordion>` was not set, or the component hasn't been mounted yet, preventing access to its underlying methods via `$refs`.","error":"TypeError: Cannot read properties of undefined (reading 'open') or similar when calling methods on ref."},{"fix":"Verify the syntax of the options object passed to the `:options` prop (e.g., `:options=\"{initialOpen: true}\"`). Crucially, consult the original `badger-accordion` library's documentation for the correct and full list of available options.","cause":"Options are being passed incorrectly or are not valid options for the underlying `badger-accordion` library.","error":"Accordion options are not taking effect."}],"ecosystem":"npm"}