nuxt-jsonld

⚠⚠⚠⚠⚠⚠⚠⚠⚠
This version is for Nuxt v2.
Please read this document for Nuxt v3.
⚠⚠⚠⚠⚠⚠⚠⚠⚠

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

Installation

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

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

Vue.use(NuxtJsonld);

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

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

with nuxt-bridge

If you are using nuxt-bridge, you have to add defineNuxtPlugin.

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

Vue.use(NuxtJsonld);

export default defineNuxtPlugin(nuxtApp => {
  if (typeof NuxtJsonld.default !== 'undefined')  {
    nuxtApp.vueApp.use(NuxtJsonld.default)
  }
})

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>