nuxt-jsonld

A Nuxt.js module to manage JSON-LD in Vue component.

Please read this if you are using Nuxt2.

Installation

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

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  modules: ['nuxt-jsonld'],
});

Usage

Composition API

You can call useJsonld with a json object.
Alternatively, you can pass a function for a reactive json, just as useHead composable.

You can use useJsonld without importing, since it is provided as Nuxt auto-imports functions.
Of course, you can import explicitly from #jsonld.

<script lang="ts" setup>
// You don't need to import explicitly.
// import { useJsonld } from '#jsonld';

// just pass a jsonld object for static jsonld
useJsonld({
  '@context': 'https://schema.org',
  '@type': 'Thing',
  name: 'static json',
});

// pass a function which returns a jsonld object for reactive jsonld
const count = ref(0);
const countUp = () => {
  count.value += 1;
};
useJsonld(() => ({
  '@context': 'https://schema.org',
  '@type': 'Thing',
  name: `reactive json: count is ${count.value}`,
}));
</script>

Options API

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

<script lang="ts">
import type { WithContext, ListItem } from 'schema-dts';

export default defineComponent({
  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(): WithContext<ListItem> {
    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>

Options

disableOptionsAPI

Options API jsonld method is implemented using global mixin.
You can disable it if you don't use it.
(default: false)

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  modules: ['nuxt-jsonld'],
  'nuxt-jsonld': { disableOptionsAPI: true },
});

Or

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  modules: [['nuxt-jsonld', { disableOptionsAPI: true }]],
});

Tips

Hide JSON-LD

If you don't need JSON-LD tag, just return null.

useJsonld(() => {
  if (!props.product) {
    return null;
  }
  return {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: this.product.name,
  };
});

Multiple JSON-LD from one component

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