Package Exports

nuxt-jsonld

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nuxt-jsonld) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>