Installation

Requirements

• Nuxt 3.0.0 or newer
• A package manager supported by your Nuxt project

Install the package

pnpm

pnpm add @avensio/nuxt-jsonld

npm

npm install @avensio/nuxt-jsonld

yarn

yarn add @avensio/nuxt-jsonld

nuxi

nuxi module add @avensio/nuxt-jsonld

Register the module

When installing with pnpm, npm or yarn; add the module to nuxt.config.ts:

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

The module auto-imports useJsonLd, useJsonLdPreset, and useObjectPresetStore.

Add your first object

Call useJsonLd from a page, layout, component, or plugin:

<script setup lang="ts">
useJsonLd({
  '@type': 'Organization',
  '@id': 'https://example.com/#organization',
  name: 'Example Inc.',
  url: 'https://example.com/',
})
</script>

You may omit @context. The module adds https://schema.org to the generated graph.

Check the result

Start Nuxt and inspect the page head. It contains one script with the key jsonld-graph:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "Example Inc.",
      "url": "https://example.com/",
    }
  ]
}
</script>

The graph array contains the objects registered globally for the application and current route.