nuxt-x-affiliate
How To
Numbered-step "How to" article with HowTo schema.org JSON-LD auto-emission.
How To
The XAFHowTo component renders a numbered-step instructional article (e.g. "How to clean your mechanical keyboard") with optional tools / supplies lists and time + cost metadata. Auto-emits a HowTo schema.org JSON-LD payload so Google can show rich results.
Components
<XAFHowTo />
<XAFHowTo
name="How to deep-clean a mechanical keyboard"
description="A 30-minute routine that brings switches back to like-new feel."
total-time="PT30M"
estimated-cost="USD 10"
:tools="['Keycap puller', 'Compressed air', 'Isopropyl alcohol']"
:supplies="['Microfiber cloth', 'Cotton swabs']"
:steps="[
{ name: 'Unplug and photograph', text: 'Unplug the keyboard. Take a photo of the layout so you can re-seat keycaps correctly.' },
{ name: 'Remove keycaps', text: 'Use the keycap puller to gently lift each keycap straight up. Set them in a bowl of soapy water.' },
{ name: 'Clean the plate', text: 'Spray compressed air across the plate. Wipe down with isopropyl alcohol on a microfiber cloth.' },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Title (used in schema). |
description | string | required | Short description (used in schema). |
steps | HowToStep[] | required | Each step: { name, text, image? }. |
totalTime | string | — | ISO 8601 duration (e.g. "PT30M"). |
estimatedCost | string | — | "USD 10" style — splits on the space to build a MonetaryAmount. |
tools | string[] | — | Tools required. |
supplies | string[] | — | Supplies required. |
AI Context
component: XAFHowTo
package: "@xenterprises/nuxt-x-affiliate"
use-when: Numbered-step "How to" article with auto-emission of HowTo schema.org JSON-LD for rich results.