Nuxt JSON-LD

@avensio/nuxt-jsonld collects structured data from your Nuxt application and renders it as one application/ld+json script in the document head.

Features

• Add Schema.org objects with the auto-imported useJsonLd composable.
• Combine application-wide objects with objects registered by the current page.
• Prevent duplicate graph nodes by their @id and explicitly replace them when needed.
• Create typed objects with exports from @avensio/nuxt-jsonld/creators.
• Define reusable type, object, and bundle presets inside your Nuxt project.
• Validate structured data with granular imports from @avensio/nuxt-jsonld/validation/classes/*.validator.

Basic example

<script setup lang="ts">
import { createWebPage } from '@avensio/nuxt-jsonld/creators'

useJsonLd(
  createWebPage({
    '@id': 'https://example.com/about/#webpage',
    name: 'About us',
    url: 'https://example.com/about/',
  })
)
</script>

The module writes a graph with a shared Schema.org context:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "@id": "https://example.com/about/#webpage",
      "name": "About us",
      "url": "https://example.com/about/"
    }
  ]
}

Continue with Installation or go directly to Runtime Usage.