nuxt-x-schema
HowTo
Schema.org HowTo JSON-LD component for step-by-step instructional content.
HowTo
The XSchemaHowTo component injects a <script type="application/ld+json"> tag for how-to structured data. No visible output — SEO only.
Components
<XSchemaHowTo />
Use on pages with step-by-step instructions (recipes, tutorials, guides). Enables rich results in Google Search with step listings.
<XSchemaHowTo
name="How to make coffee"
:steps="[
{ name: 'Boil water', text: 'Heat water to 95°C' },
{ name: 'Add grounds', text: 'Add 2 tbsp of coffee grounds' }
]"
total-time="PT5M"
/>
Props
| Prop | Type | Required | Description |
|---|---|---|---|
name | String | Yes | How-to title |
description | String | No | How-to description |
image | String | String[] | No | Illustration image URL(s) |
totalTime | String | No | ISO 8601 duration (e.g. PT30M) |
estimatedCost | MonetaryAmount | No | Estimated cost object { currency, value } |
supply | String[] | No | List of required supplies |
tool | String[] | No | List of required tools |
steps | HowToStep[] | Yes | Array of steps. Each step: { name, text, image?, url? } |
AI Context
component: XSchemaHowTo
package: "@xenterprises/nuxt-x-schema"
output: JSON-LD script tag in <head>
use-when: Adding HowTo structured data to step-by-step instructional pages (recipes, tutorials, guides)
place: In page-level components (pages/ or layouts/), NOT in shared headers
notes:
- Renderless component — no visible DOM output; purely SEO metadata
- Injects JSON-LD server-side via useHead — SSR-safe, visible to crawlers on first paint
- totalTime uses ISO 8601 duration format (e.g. PT30M for 30 minutes)
- Each step: { name, text, image?, url? }