How to Use (FAQ) Expansion Panels in Vuetify 3 Vue 3

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.

Vue

<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.

Vue

<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.

Vue

<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,