Vue Badger Accordion

2.0.2 · maintenance · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Unknown custom element: <badger-accordion> - did you register the component correctly?
```
cause The `BadgerAccordion` or `BadgerAccordionItem` components were not registered with Vue globally or locally before being used in a template.

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.
```
TypeError: Cannot read properties of undefined (reading 'open') or similar when calling methods on ref.
```
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`.

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)`.
```
Accordion options are not taking effect.
```
cause Options are being passed incorrectly or are not valid options for the underlying `badger-accordion` library.

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.

Warnings

breaking 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).
Fix: For Vue 3 projects, seek a dedicated Vue 3 accordion component or a Vue 3 compatible version of badger-accordion if one exists.
gotcha 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.
Fix: Refer to the original `badger-accordion` GitHub repository at https://github.com/stuartjnelson/badger-accordion for options and methods documentation.
deprecated 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.
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.
gotcha 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.
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.

Install

npm install vue-badger-accordion npm
yarn add vue-badger-accordion yarn
pnpm add vue-badger-accordion pnpm

Imports

BadgerAccordion
wrong:
```
const BadgerAccordion = require('vue-badger-accordion').BadgerAccordion
```
correct:
```
import { BadgerAccordion } from 'vue-badger-accordion'
```
Primary component for the accordion container, typically registered globally or locally in a Vue 2 application.
BadgerAccordionItem
wrong:
```
const BadgerAccordionItem = require('vue-badger-accordion').BadgerAccordionItem
```
correct:
```
import { BadgerAccordionItem } from 'vue-badger-accordion'
```
Child component representing an individual accordion section. Must be used within a `BadgerAccordion` parent.
Vue component registration
wrong:
```
import BadgerAccordion from 'vue-badger-accordion'
```
correct:
```
Vue.component('BadgerAccordion', BadgerAccordion)
```
When globally registering components in Vue 2, use `Vue.component`. Named imports are correct for bringing components into scope for local registration.

Quickstart

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.

import Vue from 'vue';
import { BadgerAccordion, BadgerAccordionItem } from 'vue-badger-accordion';

// Option 1: Global registration (common in smaller apps or plugins)
Vue.component('BadgerAccordion', BadgerAccordion);
Vue.component('BadgerAccordionItem', BadgerAccordionItem);
console.log('BadgerAccordion and BadgerAccordionItem globally registered.');

// Option 2: Local registration (common in component-based apps)
// In a typical Vue SFC (<script> section of a .vue file), you would do:
const MyAccordionParentComponent = {
  template: `
    <badger-accordion>
      <badger-accordion-item>
        <template slot="header">Item 1 Header</template>
        <template slot="content">Item 1 Content</template>
      </badger-accordion-item>
    </badger-accordion>
  `,
  components: {
    BadgerAccordion,
    BadgerAccordionItem
  }
};
console.log('BadgerAccordion and BadgerAccordionItem are available for local registration in Vue components.');

// This code demonstrates the import and registration process.
// To see a full example, you would integrate this into a Vue 2 application with an HTML template.

view raw JSON →