How to Create Accordion in Vue 3 using Tailwind CSS

Last Updated on by in Vue JS

In this tutorial, we will teach you how to create accordion UI component in Vue application using the Tailwind CSS and Flowbite Vue UI component library.

In UI (User Interface), accordion is an essential GUI tool that helps you expand and collapse sections of content.

It is an ideal UI component, especially when you want to show multiple information in a limited space.

Earlier have comprehended how to display Alert component in Vue, make sure to check out the guide.

It solves the space issue as well as elevates the user experience by reducing the clutter.

Generically, an accordion has 3 states, collapsed, expanded and collapsible.

We will create a collapsible accordion with some dummy content, to create a collapsible component in Vue we will take help of Flowbite UI and Tailwind CSS libraries.

How to Create Content Collapsible UI Component in Vue 3

  • Step 1: Create Vue Application
  • Step 2: Install Flowbite Package
  • Step 3: Setup Tailwind in Vue
  • Step 4: Create New Component
  • Step 5: Create Collapsible Accordion Component
  • Step 6: Update Main App File
  • Step 7: View App on Browser

Create Vue Application

The first and foremost task is to add or set up the Vue CLI.

npm install -g @vue/cli

Once the Vue CLI is configured, run the following to install a brand new Vue framework:

vue create vue-demo-app

Choose the Vue 3 option from the Vue CLI options list.

cd vue-demo-app

Install Flowbite Package

We can easily get started with Flowbite, all you have to do is just run the given command.

It will install all the Flowbite component’s’ library that is essential to build the collapsible content functionality in Vue.

 npm install flowbite flowbite-vue --legacy-peer-deps

Setup Tailwind in Vue

There are many ways to add tailwind CSS in Vue. However, we are going to follow the simplest method to add the Tailwind in Vue.

You have to open the public/index.html file, and add the following script and CSS link.

<!doctype html>
<html>
<head>
  ...
  ...

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
   
</body>
</html>

Create New Component

In order to form a new component, we have to create AccordionComp.vue file inside the components/ directory.

<template>
    <div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    }
}
</script>

In the above example, a new component called ‘AccordionComp’ is created, and this component will render content using the collapsible sections in Vue.

Create Collapsible Accordion Component

In order to lay the foundation of collapsible content section in Vue, you have to import Accordion, AccordionPanel, AccordionHeader, and AccordionContent from the ‘flowbite-vue’ library and define as suggested below.

Put the following code in the components/AccordionComp.vue file:

<script setup>
import { Accordion, AccordionPanel, AccordionHeader, AccordionContent } from 'flowbite-vue'
</script>

<template>
    <Accordion flush>
        <accordion-panel>
            <accordion-header>Section One</accordion-header>
            <accordion-content>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit.</p>
                    <p>Donec arcu ante, porttitor vitae hendrerit aliquam,
                        tincidunt ac quam.</p>
                </div>
            </accordion-content>
        </accordion-panel>
        <accordion-panel>
            <accordion-header>Section Two header</accordion-header>
            <accordion-content>
                <div>
                    <p>Suspendisse pellentesque ultricies ex, a blandit nisi
                        ultrices in.</p>
                    <p>Donec fringilla mauris et nulla dapibus
                        tincidunt. Nam eleifend id ligula in scelerisque. Donec urna magna, euismod vitae facilisis sed,
                        sollicitudin ut nunc. Fusce in rutrum ante.</p>
                </div>
            </accordion-content>
        </accordion-panel>
        <accordion-panel>
            <accordion-header>Section Three</accordion-header>
            <accordion-content>
                <div>
                    <p> Ut augue enim, mattis at lorem eget, convallis varius
                        risus. Maecenas rhoncus urna eget venenatis elementum. Orci varius natoque penatibus et magnis dis
                        parturient montes.</p>
                </div>
            </accordion-content>
        </accordion-panel>
    </Accordion>
</template>

Update Main App File

In the main App.vue file, define the accordion component that we have previously created.

<template>
  <div>
    <h2 class="text-2xl font-bold tracking-tight sm:text-3xl mb-6 mt-6">Vue 3 Tailwind Accordion Content Collapsible
      Example</h2>
    <AccordionComp />
  </div>
</template>

<script>
import AccordionComp from './components/AccordionComp.vue';

export default {
  components: {
    AccordionComp
  }
}
</script>

View App on Browser

The following command invokes the development server, compiles the code.

npm run serve

You can view the app using the given URL.

http://localhost:8080

How to Create Accordion in Vue using Tailwind CSS

Conclusion

Accordion components are generally used in a web or mobile application layouts, where collective and excessive information needs to be shown at limited space.

We have ideally seen Accordions are used in: FAQs (Frequently Asked Questions) sections, settings panels, content menus, and more.

In this tutorial, we have learned how to use Flowbite library, Tailwind CSS to build an accordion component in Vue component.

Reference: https://flowbite-vue.com/components/accordion

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.