Google Recipe Schema for vue/json.ld

recipe.vue

<template>
  <script v-html="jsonld" type="application/ld+json"></script>
</template>

<script>
    @Prop()
    recipe: Recipe;
    get jsonld(): string {
      if (this.recipe == null) {
        return "{}";
      }
      let ingredients = [];
      for (let entry of this.recipe.ingredients) {
        if (entry.isGroup) {
          entry = entry as RecipeIngredientGroup;
          for (let groupIngredient of entry.ingredients) {
            ingredients.push(RecipeUtil.formatIngredient(groupIngredient));
          }
        } else {
          entry = entry as RecipeIngredient;
          ingredients.push(RecipeUtil.formatIngredient(entry));
        }
      }
      
      let steps = [];
      for (let entry of this.recipe.steps) {
        if (entry.isGroup) {
          entry = entry as RecipeStepGroup;
          for (let groupStep of entry.steps) {
            steps.push({
              "@type": "HowToStep",
              "text": groupStep.content,
            });
          }
        } else {
          entry = entry as RecipeStep;
          steps.push({
            "@type": "HowToStep",
            "text": entry.content,
          });
        }
      }
      let servings = this.recipe.servings.amount + " ";
      
      if (this.recipe.servings.unit === RecipeServingsUnit.quantity) {
        servings += "Stück";
      }
      
      let jsonld: any = {
        "@context": "https://schema.org/",
        "@type": "Recipe",
        "name": this.recipe.title,
        "image": [
          "https://www" + this.recipe.previewImageUrl,
        ],
        "author": {
          "@type": "Person",
          "name": "John Doe"
        },
        "datePublished": this.recipe.createdAt,
        // "description": this.recipe.description, only articles have description
        "keywords": "",
        "recipeYield": servings,
        "recipeCategory": this.recipe.categoryId,
        "recipeIngredient": ingredients,
        "recipeInstructions": steps,
      };
      if (this.ratings != null) {
        jsonld.aggregateRating = {
          "@type": "AggregateRating",
          "ratingValue": "" + this.ratings.average,
          "ratingCount": "" + this.ratings.numRatings,
        };
      }
      return JSON.stringify(jsonld);
    }
  }
</script>