Table of contents
daisyUI Accordion Component for Vue.js
In this post we will look at how to create a daisyUI Accordion Component for Vue.js. The daisyUI docs are great. They provide a great starting point for an accordion component. However they do not currently have an accordion component that we can copy and paste directly into a Vue.js project. Luckily this is easy to do ourself. This guide is suitible for any Vue.js project, whether this is Nuxt, Laravel + Inertia.js + Vue.js or anything else using Vue.
Before you create your daisyUI accordion component
Before we create our component we need to make sure our project is set up so we can use daisyUI. We need to have installed TailwindCSS and daisyUI. Instructions on installing Tailwind can be found on the TailwindCSS website. Instructions on how to install daisyUI can be found in the daisyUI docs.
Once you have installed both TailwindCSS and daisyUI in your Vue.js project you are ready to create your daisyUI accordion component.
Create daisyUI Accordion component in Vue
We can now create our accordion component. In your components folder, create a new file named Accordion.vue. Paste the code below into your newly created Accordion.vue file.
// Accordion.vue<template> <template v-for="data in accordion_data"> <div class="collapse collapse-arrow bg-base-200"> <input type="radio" name="my-accordion-2" /> <div class="collapse-title text-xl font-medium"> {{ data.title }} </div> <div class="collapse-content"> <p>{{ data.content }}</p> </div> </div> </template></template><script setup>const props = defineProps({ accordion_data: Array})</script>Different daisyUI accordion styles
There are many different accordion components to choose from in the daisyUI docs. It doesn’t matter which style you choose, the concept of converting it to a re-useable Vue.js component is the same. The example above is a simple accordion with arrows. If you wish to use a different style, simple take one accordion section and convert it into the format above.
Accordion.vue code explained
The Accordion.vue component above accepts an accordion_data prop from the parent component (which we will create shortly). This array is then looped over by the Accordion.vue component and outputs the data from the array.
Use the daisyUI Accordion component in your parent component
Now we have created our accordion component, we can use it in other components. This is easy to do. See the example below:
// Parent component// index.vue<template> <div> <Accordion :accordion_data="accordion_data" /> </div></template><script setup>const accordion_data = [ { title: 'The title', content: 'The content' }, { title: 'The title two', content: 'The content two' }, { title: 'The title three', content: 'The content three' }]</script>I am using Nuxt in this example. I therefore do not need to import the Accordion.vue component. If you are not using Nuxt, you will almost certainly need to import the Accordion.vue component into your parent component.
Parent component code explained
The above code in the parent component outputs the Accordion.vue component. The data for the Accordion.vue component is stored in the accordion_data array in the parent component. This array is then passed to the Accordion.vue component.
Why should we make our Accordion component re-useable in Vue?
Creating our daisyUI components in this way saves us a lot of time in the long run. Think about it. Would you rather have a separate component for every time you wish to use an accordion in your project? Or have one file and pass the appropriate data to it each time you want to use it. By having just one Accordion.vue component we keep our project simple. Plus, if we want to change the styling we only have to do it in one place.
I have videos too!
If you found this post helpful, please consider subscribing to the @codingoblin YouTube channel 😀
