Vue Accordion Component

A simple and lightweight Vue 3 accordion component plugin. Supports both global plugin registration and local component usage. Written in TypeScript. The accordion component contains a minimum of CSS styles, which makes it easy to integrate into any of your designs. You can install the component using the NPM or Yarn package managers. The component allows you to configure the ability to have one or several elements of the accordion active at the same time. The CSS class “active” is added to the open accordion element.

Demo: https://vue.webstep.top/ws-acc

Installation

# via npm
npm install vue-ws-acc

# or via yarn
yarn add vue-ws-acc

Usage

1. Global registration (as a plugin)

import { createApp } from 'vue';
import App from './App.vue';
import VueWsAcc from 'vue-ws-acc';
import 'vue-ws-acc/dist/vue-ws-acc.css';

const app = createApp(App);
app.use(VueWsAcc);
app.mount('#app');

Now the component <VueWsAcc /> is available globally.

2. Local registration (per component)

<template>
  <VueWsAcc :items="accordionItems" />
</template>

<script lang="ts" setup>
import VueWsAcc from 'vue-ws-acc';
import 'vue-ws-acc/dist/vue-ws-acc.css';

const accordionItems = [
  { title: 'Section 1', content: 'Content for section 1' },
  { title: 'Section 2', content: 'Content for <strong>section</strong> 2' }
];
</script>

The “content” value may contain HTML tags.

Multiple

By default, only one accordion element can be active at a time. However, this behavior can be changed using the “multi” attribute, allowing multiple elements to be active at once.

<VueWsAcc :items="accordionItems" multi />

Styles

The component uses a minimum of CSS styles. These styles are easy to override. However, if you need to disable optional component styles, you can do so using the “simple” attribute.

<VueWsAcc :items="accordionItems" simple />

Props

Example item: { title: string, content: string }

NPM: https://www.npmjs.com/package/vue-ws-acc
GitHub: https://github.com/igorrybalko/vue-ws-acc