nuxt-x-affiliate
Recipe
Recipe article with ingredients, instructions, nutrition info, and Recipe schema.org JSON-LD.
Recipe
The XAFRecipe component renders a full recipe article — title, description, prep/cook/total time, servings, ingredients list, instructions list, optional nutrition info, and aggregate rating. Auto-emits a Recipe schema.org JSON-LD payload so Google can show rich recipe results.
Components
<XAFRecipe />
<XAFRecipe
name="Classic Margherita Pizza"
description="30-minute homemade pizza with a crispy crust and bright tomato sauce."
prep-time="PT15M"
cook-time="PT15M"
total-time="PT30M"
recipe-yield="4 servings"
recipe-category="Main course"
recipe-cuisine="Italian"
:keywords="['pizza', 'italian', 'weeknight']"
:ingredients="[
{ name: 'Pizza dough', amount: '1 lb' },
{ name: 'San Marzano tomatoes', amount: '1 can' },
{ name: 'Fresh mozzarella', amount: '8 oz' },
]"
:steps="[
{ name: 'Preheat oven', text: 'Preheat to 500°F with a pizza stone inside for 30 min.' },
{ name: 'Stretch dough', text: 'On a floured surface, stretch to a 12-inch round.' },
{ name: 'Top and bake', text: 'Top with crushed tomatoes, torn mozzarella, and a drizzle of olive oil. Bake 8–10 min.' },
]"
author="Jane Reviewer"
:rating="{ value: 4.8, count: 124 }"
:nutrition="{ calories: '285 kcal', proteinContent: '12 g', fatContent: '10 g', carbohydrateContent: '36 g' }"
image="/img/margherita.jpg"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Recipe name. |
description | string | required | Short description. |
ingredients | Ingredient[] | required | Each: { name, amount? }. |
steps | RecipeStep[] | required | Each: { name?, text }. |
prepTime | string | — | ISO 8601 prep duration (e.g. "PT15M"). |
cookTime | string | — | ISO 8601 cook duration. |
totalTime | string | — | ISO 8601 total duration. |
recipeYield | string | — | Servings / yield. |
recipeCategory | string | — | Category (e.g. "Main course"). |
recipeCuisine | string | — | Cuisine (e.g. "Italian"). |
keywords | string[] | — | Comma-joined for schema. |
author | string | — | Author name. |
rating | { value, count } | — | Aggregate rating for the recipe. |
nutrition | object | — | Nutrition info: calories, proteinContent, fatContent, carbohydrateContent. |
image | string | — | Hero image URL. |
AI Context
component: XAFRecipe
package: "@xenterprises/nuxt-x-affiliate"
use-when: Recipe article with ingredients, instructions, nutrition, and auto-emission of Recipe schema.