Skip to content

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

Notifications You must be signed in to change notification settings

ymmooot/nuxt-jsonld

Folders and files

NameName
Last commit message
Last commit date

Latest commit

95c40bc · Dec 11, 2024
Nov 28, 2024
Dec 11, 2024
Dec 11, 2024
Nov 29, 2018
Apr 16, 2022
Apr 16, 2022
Jun 6, 2022
Apr 16, 2022
Apr 16, 2022
Nov 28, 2024
Nov 28, 2024
Jul 3, 2019
Jan 26, 2023
Dec 11, 2024
Dec 11, 2024

Repository files navigation

nuxt-jsonld

version downloads Test codecov nuxt-jsonld

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

Please read nuxt-jsonld@v1 document if you are using Nuxt2.

Installation

$ yarn add nuxt-jsonld
# or
$ npm install nuxt-jsonld
// nuxt.config.ts
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.

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>

tagPosition

You can use the tagPosition: 'bodyClose' option on applicable tags to append them to the end of the <body> tag. This option works the same as the one described in useHead.

default: head

useJsonld(
  {
    '@context': 'https://schema.org',
    '@type': 'Thing',
    name: 'static json',
  },
  {
    tagPosition: 'bodyClose', // 'head', 'bodyOpen', 'bodyClose'
  }
);

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
export default defineNuxtConfig({
  modules: ['nuxt-jsonld'],
  'nuxt-jsonld': { disableOptionsAPI: true },
});

Or

// nuxt.config.ts
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

Note: Safari will log an error to the console when using an array to describe multiple data. While the library functions correctly, please exercise caution if you are aggregating error logs with tools like Sentry. To avoid this issue, use @graph. #1280