How to Build an Accordion Component in Vue.JS

How to create a reusable accordion component from scratch

Luca Spezzano
NotOnlyCSS

--

Photo by Joshua Aragon on Unsplash

This is my fourth “How to” article on Vue.js components, I have seen that they are the most read, probably because they are step-by-step tutorials that allow you to create something concrete and usable very fast.

So I decided to share with you one of the components that I use most often during the development of my projects: the AppAccordion.

The Accordion component is very useful and can be found in many libraries such as Bootstrap, for this reason, we can consider it one of the most used.

Let’s build it!

Building the Accordion

In this tutorial, I will not use any style except the one needed for the functionality of the accordion, in this way it can easily be adapted to your projects.

I will be using TailwindCSS for some basic CSS properties, but you are free to replicate the CSS however you like.

--

--

Luca Spezzano
NotOnlyCSS

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.