FAQ
FAQ content structure, YAML format, and type-based filtering.
File Structure
FAQ entries are YAML files in content/faq/. Each file represents a group of questions:
content/faq/1.technical.yml
type: technical
label: Technical Questions
icon: i-lucide-code
color: info
items:
- label: What tech stack does this use?
content: Built on Nuxt 4, Tailwind CSS v4, and TypeScript.
- label: Can I self-host?
content: Yes. Docker and Vercel deployment configs are included.
Schema
The baseFaqSchema validates each FAQ file:
| Field | Type | Required | Description |
|---|---|---|---|
type | string | Yes | Category identifier (used for filtering) |
label | string | Yes | Display name for the category |
icon | string | Yes | Icon displayed next to the category label |
color | 'error' | 'warning' | 'success' | 'info' | Yes | Accent color for the category |
items | array | Yes | Array of { label, content } question/answer pairs |
Using FAQ in Landing Pages
The ::section-faq component pulls from the FAQ collection automatically:
::section-faq
---
headline: Frequently Asked Questions
---
::
Filtering by Type
Pass a types array to show only specific FAQ categories:
::section-faq
---
headline: Technical FAQ
types:
- technical
---
::
Using the FaqAccordion Component Directly
For more control, use the FaqAccordion component outside of a section:
<FaqAccordion :types="['technical', 'general']" />
Or pass items directly without fetching from the collection:
<FaqAccordion
:items="[
{ label: 'Question 1', content: 'Answer 1' },
{ label: 'Question 2', content: 'Answer 2' },
]"
/>
File Ordering
Files are ordered by their numeric prefix: 1.technical.yml loads before 2.general.yml. This controls the display order when no type filter is applied.
See the FAQ schema definition for all available fields.