nuxt-jsonld

A Nuxt.js plugin to manage jsonld in Vue component.

Installation

$ yarn add nuxt-jsonld
or
$ npm install nuxt-jsonld

// plugins/jsonld.js
import Vue from 'vue';
import NuxtJsonld from 'nuxt-jsonld';

Vue.use(NuxtJsonld);

// you can set the indentation
Vue.use(NuxtJsonld, {
  space: process.env.NODE_ENV === 'production' ? 0 : 2, // default: 2
});

Then, add plugin config to nuxt.config.js.

  plugins: ['~/plugins/jsonld'],

Usage

Make a jsonld method to your Vue components and return structured data object.

<template>
  ...
</template>

<script>
export default {
  data() {
    return {
      breadcrumbs: [
        {
          url: 'https://example.com',
          text: 'top page',
        },
        {
          url: 'https://example.com/foo',
          text: 'foo',
        },
        {
          url: 'https://example.com/foo/bar',
          text: 'bar',
        },
      ],
    };
  },
  jsonld() {
    const items = this.breadcrumbs.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      item: {
        '@id': item.url,
        name: item.text,
      },
    }));
    return {
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      itemListElement: items,
    };
  },
};
</script>

🎉 You will get the jsonld tag! 🎉

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://example.com",
        "name": "top page"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://example.com/foo",
        "name": "foo"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://example.com/foo/bar",
        "name": "bar"
      }
    },
  ]
}
</script>

If you do not want to make jsonld tag, just return null;

<script>
export default {
  props: ['foo'],
  jsonld() {
    if (!this.foo) {
      return null;
    }

    return {
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: 'product name',
    };
  },
};
</script>

You can return multiple json data as an array.

[
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [/* breadcrumb items*/]
  },
  {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "mainEntityOfPage": {/* article info */}
  },
]

Or use @graph notation. #247

TypeScript

with Vue.extend

<script lang="ts">
export default Vue.extend({
  jsonld() {
    return {
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: 'product name',
    };
  },
});
</script>

with vue-property-decorator

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Jsonld } from 'nuxt-jsonld';

@Jsonld
@Component
export default class Sample extends Vue {
  jsonld() {
    return {
      '@context': 'https://schema.org',
      '@type': 'Product'
      name: 'product name',
    };
  }
};
</script>