Premium

Vue Accordion / FAQ Component

By FrontendAtlas Team · Updated Jan 30, 2026

Build a simple FAQ (accordion) UI in Vue 3 using reactive state. Clicking a question should toggle its answer. By default, only one item can be open at a time, but the user can enable a mode where multiple items can stay open. Vue focus:…

Use Vue 3 with a single root component as the main entry.
Render a FAQ card with 3–4 FAQ items (question + answer).

What you’ll build / What this tests

This premium vue coding focuses on Vue Accordion / FAQ Component. You’ll apply vue and components thinking with intermediate level constraints. The prompt emphasizes Build a simple FAQ (accordion) UI in Vue 3 using reactive state. Clicking a question should….

Learning goals

Translate the prompt into a clear vue API signature and return shape.
Apply vue, components, composition-api techniques to implement vue accordion / faq component.
Handle intermediate edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in vue.

Key decisions to discuss

Define the exact input/output contract before coding.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Use Vue 3 with a single root component as the main entry.
Render a FAQ card with 3–4 FAQ items (question + answer).
Clicking a question toggles its answer open/closed.
In the default mode, only one FAQ item can be open at a time.
Add a control (e.g. a checkbox) to switch to 'allow multiple open' mode.
In 'allow multiple open' mode, more than one FAQ item can be open at the same time.
Use a child component for a single FAQ row.
Initially all FAQ items are closed.
Clicking a closed question opens its answer.
In single-open mode: opening one item closes any other open item.

Mini snippet (usage only)

// Example usage
const input = /* vue accordion / faq component input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.