Runtime Usage

Register an object

useJsonLd(input, overwrite?) accepts one JSON-LD object or an array of objects.

useJsonLd({
  '@type': 'Person',
  '@id': 'https://example.com/people/jane/#person',
  name: 'Jane Doe',
})

Use creators when you want Schema.org-aware TypeScript input types:

import { createArticle, createPerson } from '@avensio/nuxt-jsonld/creators'

const author = createPerson({
  '@id': 'https://example.com/people/jane/#person',
  name: 'Jane Doe',
})

useJsonLd(createArticle({
  '@id': 'https://example.com/articles/structured-data/#article',
  headline: 'Structured data with Nuxt',
  author,
}))

Application and route scope

Calls made by a matched page are stored for that route. Calls outside a page, for example from a layout or plugin, are stored application-wide. The generated head graph combines the application-wide objects with the objects for the current route.

When navigation changes the route, the head script is rebuilt from the matching stores. Objects from a previous route are not included unless they were registered application-wide.

Identity and replacement

The module indexes typed objects by @id. A later registration with the same @id is ignored by default:

useJsonLd(person)
useJsonLd(updatedPerson) // ignored when both objects use the same @id

Pass true as the second argument to replace an existing object:

useJsonLd(updatedPerson, true)

Replacement also finds matching typed objects nested inside another graph node. Use stable, absolute identifiers whenever an entity can appear in more than one place.

Cyclic references

The graph normalizer protects the generated JSON from cyclic JavaScript references. When a repeated object has an @id, the repeated occurrence becomes an @id reference.