nuxt-x-affiliate
Decision Flow
Interactive flowchart quiz — branches between question nodes and lands on a recommended product.
Decision Flow
The XAFDecisionFlow component renders an interactive flowchart — readers answer one question at a time, each answer routes them to another question or to a product recommendation. Distinct from <XAFQuiz>: this is tree-based, not linear, and is best for "help me choose" flows with branching logic.
Components
<XAFDecisionFlow />
<XAFDecisionFlow
title="Help me choose a keyboard"
subtitle="Three quick questions."
:start="{ id: 'q1', question: 'What will you use it for?', options: [
{ label: 'Daily typing', next: 'q2' },
{ label: 'Gaming', next: 'q3' },
]}"
:nodes="{
q2: { id: 'q2', question: 'Wired or wireless?', options: [
{ label: 'Wireless', next: 'result:wireless-k1' },
{ label: 'Wired', next: 'result:wired-k2' },
]},
q3: { id: 'q3', question: 'Mechanical or membrane?', options: [
{ label: 'Mechanical', next: 'result:gaming-mech' },
{ label: 'Membrane', next: 'result:gaming-mem' },
]},
}"
:results="{
'wireless-k1': { productId: 'wireless-k1', name: 'Logitech MX Keys S', description: 'Best wireless for typists.', href: '/reviews/mx-keys-s' },
'wired-k2': { productId: 'wired-k2', name: 'Keychron K2', description: 'Solid wired pick.', href: '/reviews/keychron-k2' },
'gaming-mech': { productId: 'gaming-mech', name: 'Razer Huntsman', description: 'Top gaming mech.', href: '/reviews/razer-huntsman' },
'gaming-mem': { productId: 'gaming-mem', name: 'Logitech G213', description: 'Budget gaming.', href: '/reviews/logitech-g213' },
}"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
start | FlowNode | required | The root question node. |
nodes | Record<string, FlowNode> | required | All branch nodes, keyed by ID. |
results | Record<string, FlowResult> | required | All terminal results, keyed by productId. |
title | string | "Help me choose" | Section heading. |
subtitle | string | — | Optional subtitle. |
Each option's next is either another node ID or a result:<productId> to terminate.
AI Context
component: XAFDecisionFlow
package: "@xenterprises/nuxt-x-affiliate"
use-when: Interactive flowchart quiz with branching question nodes that lands on a recommended product.