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/cliOnce the Vue CLI is configured, run the following to install a brand new Vue framework:
vue create vue-demo-appChoose the Vue 3 option from the Vue CLI options list.
cd vue-demo-appInstall 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-depsSetup 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 serveYou can view the app using the given URL.
http://localhost:8080
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.