Accordion group

Component

Props

Usage

items

An array of objects used to render each accordion entry. Each object must follow the AccordionItem interface with at least id, title, and content fields. Items can be grouped by providing a group key. If not provided, they will be grouped under the defaultGroupName prop.

 <template>
    <AccordionGroup :items="items" />
</template>

<script setup lang="ts">
const items: AccordionItem[] = [
    {
        id: 1,
        title: 'What is Nuxt?',
        content: 'Nuxt is a Vue framework for building full-stack applications.',
        group: 'Nuxt',
    },
    {
        id: 2,
        title: 'Why choose Nuxt?',
        content: 'Nuxt simplifies server-side rendering and routing.',
        group: 'Nuxt',
    },
    {
        id: 3,
        title: 'What is Tailwind?',
        content: 'Tailwind is a utility-first CSS framework for rapid UI development.',
        group: 'Tailwind',
    },
    {
        id: 4,
        title: 'How does Tailwind work?',
        content: 'It applies utility classes directly in your templates for styling.',
        group: 'Tailwind',
    },
    {
        id: 5,
        title: 'Can I use them together?',
        content: 'Yes! Nuxt 3 works great with Tailwind out of the box.',
    },
    {
        id: 6,
        title: 'Is it customizable?',
        content: 'Both Nuxt and Tailwind are highly configurable to fit project needs.',
    },
]
</script>
 

TypeScript interface

 interface AccordionItem {
    id: number
    title: string
    content: string
    group?: string
}
 

defaultGroupName

Defines the fallback group label for items that do not have an explicit group property. This label will be used to group all ungrouped accordion items.

• Type: string
• Default: 'Group title'

defaultGroupPosition

Controls the position of the default group in the rendered list of grouped accordions. Uses the OrderPosition enum as value.

• Type: OrderPosition
• Default: OrderPosition.START

Options

titleCustomClass

Allows you to override the Tailwind CSS classes applied to the group title (<h3> or dynamic tag). Useful for customizing typography, spacing, or color per project requirements.

• Type: string
• Default: 'font-semibold text-lg text-text-neutral-subtle'

titleTag

Specifies the HTML tag to be used for each group heading. This is useful for maintaining semantic structure (e.g., h3, h4) in larger documents or pages.

• Type: 'h3' | 'h4' | 'h5' | 'h6'
• Default: 'h3'