In this tutorial, we’ll create an accordion in Vue 3 using Shadcn-Vue. Before we start, make sure to install and configure Shadcn UI in your Vue 3 project.
To utilize the accordion functionality, you’ll need to add the accordion component from Shadcn-Vue.
npx shadcn-vue@latest add accordion
# or
npx shadcn-vue@latest add
1. To create a basic accordion in Vue 3 using Shadcn-Vue, you can use the Accordion
, AccordionContent
, AccordionItem
, and AccordionTrigger
components.
<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](https://webvees.com/wp-content/uploads/2024/05/E4c7O52BGlF936wS77GWzMVfnEiZofTIYlivewKx.png)
Javed sheikh
![](https://webvees.com/wp-content/uploads/2024/07/Javedsheikh-1-1.png)
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,