In this tutorial, we will see how to use FAQs accordion in Vuetify.js 3 with Vue.js 3. We will cover FAQ expansion panels, accordion expansion panels. Before we begin, you need to install and configure Vuetify 3 in Vue 3
How to Install Vuetify 3 in Vue 3
1. Vuetify 3 Vue 3 basic FAQ accordion using v-expansion-panels
, v-expansion-panel
component.
<template>
<v-expansion-panels>
<v-expansion-panel title="Title"
text="Lorem ipsum....">
</v-expansion-panel>
</v-expansion-panels>
</template>
2. Vuetify 3 Vue 3 default, accordion, inset, popout FAQ.
<template>
<div>
<div class="text-subtitle-2 mb-2">Default</div>
<v-expansion-panels>
<v-expansion-panel v-for="i in 3" :key="i" title="Item"
text="Lorem ipsum dolor ..."></v-expansion-panel>
</v-expansion-panels>
<div class="text-subtitle-2 mt-4 mb-2">Accordion</div>
<v-expansion-panels variant="accordion">
<v-expansion-panel v-for="i in 3" :key="i" title="Item"
text="Lorem ipsum dolor ..."></v-expansion-panel>
</v-expansion-panels>
<div class="text-subtitle-2 mt-4 mb-2">Inset</div>
<v-expansion-panels variant="inset" class="my-4">
<v-expansion-panel v-for="i in 3" :key="i" title="Item"
text="Lorem ipsum dolor ..."></v-expansion-panel>
</v-expansion-panels>
<div class="text-subtitle-2 mt-4 mb-2">Popout</div>
<v-expansion-panels variant="popout" class="my-4">
<v-expansion-panel v-for="i in 3" :key="i" title="Item"
text="Lorem ipsum dolor ..."></v-expansion-panel>
</v-expansion-panels>
</div>
</template>
3. Create Custom icon FAQ Expand action icon can be customized with the expand-icon prop or the actions slot.
<template>
<div>
<v-expansion-panels class="mb-6">
<v-expansion-panel v-for="i in 3" :key="i">
<v-expansion-panel-title expand-icon="mdi-menu-down">
Item
</v-expansion-panel-title>
<v-expansion-panel-text>Lorem ipsum ...</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title collapse-icon="mdi-minus" expand-icon="mdi-plus">
Item
</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor... </v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-title>
Item
<template v-slot:actions="{ expanded }">
<v-icon :color="!expanded ? 'teal' : ''" :icon="expanded ? 'mdi-pencil' : 'mdi-check'"></v-icon>
</template>
</v-expansion-panel-title>
<v-expansion-panel-text> Lorem ipsum dolor... </v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-title disable-icon-rotate>
Item
<template v-slot:actions>
<v-icon color="error" icon="mdi-alert-circle"> </v-icon>
</template>
</v-expansion-panel-title>
<v-expansion-panel-text>
Lorem ipsum dolor sit amet, ...
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</div>
</template>
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,