Nuxt JSON-LD

https://github.com/ymmooot/nuxt-jsonld
Admin
A Nuxt.js module that simplifies the management of JSON-LD structured data within Vue components,...
Tokens:1,026
Snippets:8
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install nuxt-jsonld package

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Instructions to add the nuxt-jsonld package to your project using either yarn or npm package managers.

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

--------------------------------

### Configure nuxt-jsonld module in nuxt.config.ts

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Example of how to add 'nuxt-jsonld' to the modules array in your Nuxt.js configuration file (nuxt.config.ts) to enable the module.

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

--------------------------------

### UseJsonld with Composition API for static and reactive JSON-LD

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Demonstrates how to use the `useJsonld` composable in a Vue component with Nuxt's Composition API. It shows examples for providing static JSON-LD objects and reactive JSON-LD objects using a function.

```vue
<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>
```

--------------------------------

### Configure tagPosition option for JSON-LD in Composition API

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Example of passing the `tagPosition` option to `useJsonld` to control where the JSON-LD script tag is rendered in the HTML document, similar to Nuxt's `useHead`.

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

--------------------------------

### Return multiple JSON-LD objects as an array

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Example of providing multiple JSON-LD structured data objects by returning an array. Note that Safari may log errors with this approach; consider using `@graph` notation for better compatibility.

```js
[
  {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      /* breadcrumb items*/
    ],
  },
  {
    '@context': 'https://schema.org',
    '@type': 'NewsArticle',
    mainEntityOfPage: {
      /* article info */
    },
  },
];
```

--------------------------------

### Define JSON-LD data using Options API jsonld method

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Illustrates how to define structured data using the `jsonld` method within a Vue component when using the Options API. It shows an example of generating a BreadcrumbList schema dynamically.

```vue
<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>
```

--------------------------------

### Conditionally hide JSON-LD by returning null

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Demonstrates how to prevent a JSON-LD tag from being rendered by returning `null` from the `useJsonld` function, useful for conditional rendering based on data availability.

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

--------------------------------

### Disable Options API jsonld method in nuxt.config.ts

Source: https://github.com/ymmooot/nuxt-jsonld/blob/master/README.md

Shows how to disable the Options API `jsonld` method by setting `disableOptionsAPI` to `true` in `nuxt.config.ts`. This can be done directly or within a nested array for the module configuration.

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

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