Registry / web-framework / vue-badger-accordion

vue-badger-accordion

library2.0.2jsnpmunverified

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.

web-framework

npm install vue-badger-accordion

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-BADGER-ACCORDI

vue-badger-accordion

web-frameworkjavascriptv2.0.2

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.

BadgerAccordion

✓ import { BadgerAccordion } from 'vue-badger-accordion'

✗ const BadgerAccordion = require('vue-badger-accordion').BadgerAccordion

Primary component for the accordion container, typically registered globally or locally in a Vue 2 application.

BadgerAccordionItem

✓ import { BadgerAccordionItem } from 'vue-badger-accordion'

✗ const BadgerAccordionItem = require('vue-badger-accordion').BadgerAccordionItem

Child component representing an individual accordion section. Must be used within a `BadgerAccordion` parent.

Vue component registration

✓ Vue.component('BadgerAccordion', BadgerAccordion)

✗ import BadgerAccordion from 'vue-badger-accordion'

When globally registering components in Vue 2, use `Vue.component`. Named imports are correct for bringing components into scope for local registration.

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.

Debug

Known issues

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

affects: >=2.0.0

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

affects: >=2.0.0

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

affects: >=2.0.0

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

affects: >=2.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <badger-accordion> - did you register the component correctly?

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.

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.

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.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

vuerequiredPeer dependency as it is a Vue 2 component.

badger-accordionrequiredCore runtime dependency providing the underlying accordion logic and functionality.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vanderb/vue-badger-accordion ↗

packagehttps://www.npmjs.com/package/vue-badger-accordion ↗