how to use accordion in shadcn ui with vue 3

How to Use Accordion in Shadcn UI with Vue 3

VueJS
25/09/23
Webvees

In this tutorial, we will create accordion in vue 3 with shadcn-vue. Before we begin, you need to install and configure Shadcn UI in Vue 3.

How to Use Shadcn UI in Vue 3

To use Accordion you need to shadcn-vue add accordion.

npx shadcn-vue@latest add accordion
# or
npx shadcn-vue@latest add


1. Vue 3 create basic accordion using shadcn-vue Accordion, AccordionContent, AccordionItem, AccordionTrigger component.

<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
</script>

<template>
  <Accordion type="single" collapsible>
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>


2. Vue 3 with shadcn-vue default one is open accordion using typescript.

<script setup lang="ts">
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'

const defaultValue = 'item-1'

const accordionItems = [
  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },
  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\'s unstyled by default, giving you freedom over the look and feel.' },
  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },
]
</script>

<template>
  <Accordion type="single" class="w-full" collapsible :default-value="defaultValue">
    <AccordionItem v-for="item in accordionItems" :key="item.value" :value="item.value">
      <AccordionTrigger>{{ item.title }}</AccordionTrigger>
      <AccordionContent>
        {{ item.content }}
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>
vue 3  shadcn-vue accordion

vue 3 shadcn-vue accordion