Gridsome: JSON-LD example

I used Strapi for Headless.

Breadcrumbs

  data() {
    return {
      jsonld: {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        itemListElement: [
          {
            "@type": "ListItem",
            position: 1,
            item: {
              "@id": process.env.APP_URL,
              name: "Home",
            },
          },
          {
            "@type": "ListItem",
            position: 2,
            item: {
              "@id": process.env.APP_URL + "/catalog/",
              name: "Catalog",
            },
          },
          {
            "@type": "ListItem",
            position: 3,
            item: {
              "@id":
                process.env.APP_URL +
                "/" +
                this.$page.strapi.products[0].category.slug +
                "/",
              name: this.$page.strapi.products[0].category.name,
            },
          },
          {
            "@type": "ListItem",
            position: 4,
            item: {
              "@id":
                process.env.APP_URL +
                "/" +
                this.$page.strapi.products[0].slug +
                "/",
              name: this.$page.strapi.products[0].title,
            },
          },
        ],
      },
    };
  },
  metaInfo() {
    return {
      script: [
        { innerHTML: JSON.stringify(this.jsonld), type: "application/ld+json" },
      ],
    }
  }