How To


Vue Schema.org HowTo

  • Type: defineHowTo(input?: HowTo)
    Describes a HowTo guide, which contains a series of steps.
  • Component: SchemaOrgHowTo (see how components work)

Required properties

  • name string
    A string describing the guide. This can be provided using route meta on the title key, see defaults.
  • step HowToStep[].
    An array of objects describing the steps in the guide. Appends the HowToStep entries on to the HowTo. Completes @type and resolves url and image.
  • step.text The full instruction text of this step.

Examples

Minimal

defineHowTo({  name: 'How to tie a tie',  step: [    {      url: '#step-one',      text: 'Button your shirt how you\'d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.',      image: '/1x1/photo.jpg',    },    {      url: '#step-two',      text: 'Cross the long end over the short end. This will form the basis for your knot.',      image: '/1x1/photo.jpg',    }, {      url: '#step-three',      text: 'Bring the long end back under the short end, then throw it back over the top of the short end in the other direction. ',      image: '/1x1/photo.jpg',    }, {      text: 'Now pull the long and through the loop near your neck, forming another loop near your neck.',      image: '/1x1/photo.jpg',    }, {      text: 'Pull the long end through that new loop and tighten to fit! ',      image: '/1x1/photo.jpg',    },  ]})

Defaults

Types

/** * Instructions that explain how to achieve a result by performing a sequence of steps. */export interface HowToSimple extends Thing {  /**   * A string describing the guide.   */  name: string  /**   * An array of howToStep objects   */  step: NodeRelations<HowToStep | string>[]  /**   * The total time required to perform all instructions or directions (including time to prepare the supplies),   * in ISO 8601 duration format.   */  totalTime?: string  /**   * Introduction or description content relating to the HowTo guide.   */  description?: string  /**   * The language code for the guide; e.g., en-GB.   */  inLanguage?: string  /**   * The estimated cost of the supplies consumed when performing instructions.   */  estimatedCost?: string | unknown  /**   * Image of the completed how-to.   */  image?: NodeRelations<ImageObject | string>  /**   * A supply consumed when performing instructions or a direction.   */  supply?: string | unknown  /**   * An object used (but not consumed) when performing instructions or a direction.   */  tool?: string | unknown  /**   * A video of the how-to. Follow the list of required and recommended Video properties.   * Mark steps of the video with hasPart.   */  video?: NodeRelations<VideoObject | string>}
export interface HowToStepSimple extends Thing {  /**   * A link to a fragment identifier (an 'ID anchor') of the individual step   * (e.g., https://www.example.com/example-page/#recipe-step-5).   */  url?: string  /**   * The instruction string   * ("e.g., "Bake at 200*C for 40 minutes, or until golden-brown, stirring periodically throughout").   */  text: string  /**   * The word or short phrase summarizing the step (for example, "Attach wires to post" or "Dig").   * Don't use non-descriptive text (for example, "Step 1: [text]") or other form of step number (for example, "1. [text]").   */  name?: string  /**   * An image representing the step, referenced by ID.   */  image?: NodeRelations<ImageObject | string>  /**   * A video for this step or a clip of the video.   */  video?: NodeRelations<VideoObject | string>  /**   * A list of detailed substeps, including directions or tips.   */  itemListElement?: NodeRelations<HowToDirection | string>[]}