Package Exports

nuxt-jsonld
nuxt-jsonld/lib/index.js

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

⚠⚠⚠⚠⚠⚠⚠⚠⚠
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'],

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>