Vue 3 rich accordion component

Demo | Repository | NPM | YouTube

Features

• Zero dependency
• SSR friendly
• Nuxt friendly
• Fully typed with typescript
• Block resize friendly
• v-model controlled
• Default-open feature
• Dynamic content reaction
• Dynamic items allowed
• Animated (optional, controlled by css)
• Exclude closed item's content from tab loop
• All content is provided by slots
• Css fully customizable
• W3C validator passed

Installation

via yarn

1yarn add vue3-rich-accordion

or via npm

1npm i vue3-rich-accordion

Adding to project

via plugin

1// ./src/main.ts
2
3import { createApp } from "vue";
4import App from "./App.vue";
5import { useAccordion } from "vue3-rich-accordion";
6import "vue3-rich-accordion/accordion-library-styles.css";
7//import "vue3-rich-accordion/accordion-library-styles.scss"; if you wanna to use scss
8
9const app = createApp(App);
10app.use(useAccordion);
11
12app.mount("#app");

or you can use via importing sfc

1// SomeVueComponent.vue
2<script setup>
3    import { AccordionList, AccordionItem } from "vue3-rich-accordion";
4</script>

Usage

You can see the full example on demo page Also you can see code example in AccordionSandbox.vue

Props

1    interface IAccordionListProps {
2    openMultipleItems ? : boolean;      // if true you can open multiple items same time
3    state ? : Record<string, boolean>;  // representing list state {"id1": true, "id2": false} - means 1 item is opened and 2 one is closed
4    setClosePropertyTime ? : number;    // do not touch if everything is ok. it is used to order closing and animation 
5}
6
7interface IAccordionItemProps {
8    id?: string;                //Custom id. It is the key in the state object of AccordionList
9    defaultOpened?: boolean;    // if provided item would be opened by default. 
10    disabled?: boolean          // is item disabled or not 
11}

Slots

1
2<AccordionItem>
3    <template #summary>Item summary</template>
4    <template #icon>☝️</template>
5    <h3>Main content</h3>
6</AccordionItem>

Customization + Styles

You can use default styles via

1import "vue3-rich-accordion/accordion-library-styles.css";
2//import "vue3-rich-accordion/accordion-library-styles.scss"; if you wanna to use scss

You also can clone this files and change for your design

Default icon is described in styles, you can change it via styles customization