{"library":"nuxt-jsonld","title":"Nuxt JSON-LD Module","description":"nuxt-jsonld is a specialized Nuxt.js module designed to streamline the integration and management of JSON-LD (Linked Data) within Vue components, primarily for SEO purposes. Currently at version 2.2.1, it provides a developer-friendly API for embedding structured data directly into Nuxt 3 applications. The module maintains an active release cadence, with the latest update in June 2025, focusing on bug fixes and compatibility. Key differentiators include its `useJsonld` composable for Composition API, enabling both static and reactive JSON-LD generation, as well as support for the Options API. It addresses the complexities of server-side rendering (SSR) and static site generation (SSG) for structured data, ensuring proper SEO indexing, unlike manual `useHead` implementations that might require more boilerplate and careful handling of reactivity and deduplication. It also provides explicit handling for Nuxt 2 users via its v1 documentation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install nuxt-jsonld"],"cli":null},"imports":["export default defineNuxtConfig({\n  modules: ['nuxt-jsonld']\n});","useJsonld({\n  '@context': 'https://schema.org',\n  '@type': 'Thing',\n  name: 'My Static Item'\n});","const someData = ref('Initial');\nuseJsonld(() => ({\n  '@context': 'https://schema.org',\n  '@type': 'Product',\n  name: `Reactive Product: ${someData.value}`\n}));"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!-- nuxt.config.ts -->\nexport default defineNuxtConfig({\n  modules: ['nuxt-jsonld'],\n  // Optional: Disable Options API mixin if not used\n  // jsonld: {\n  //   disableOptionsAPI: true\n  // }\n});\n\n<!-- pages/index.vue or any Vue component -->\n<template>\n  <div>\n    <h1>My Page with Structured Data</h1>\n    <p>This content is augmented with JSON-LD for SEO.</p>\n    <button @click=\"updateProductRating\">Update Rating</button>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\n// useJsonld is auto-imported by Nuxt\n\nconst productRating = ref(4.5);\n\n// Static JSON-LD for the page\nuseJsonld({\n  '@context': 'https://schema.org',\n  '@type': 'WebPage',\n  'name': 'Homepage with JSON-LD',\n  'description': 'A comprehensive page featuring structured data for SEO.'\n});\n\n// Reactive JSON-LD for a product, updated dynamically\nconst updateProductRating = () => {\n  productRating.value = Math.min(5.0, productRating.value + 0.1);\n};\n\nuseJsonld(() => ({\n  '@context': 'https://schema.org',\n  '@type': 'Product',\n  'name': 'Awesome Widget Pro',\n  'image': 'https://example.com/widget-pro.jpg',\n  'description': 'The best widget for all your needs.',\n  'brand': {\n    '@type': 'Brand',\n    'name': 'WidgetCo'\n  },\n  'aggregateRating': {\n    '@type': 'AggregateRating',\n    'ratingValue': productRating.value.toFixed(1),\n    'reviewCount': '120'\n  },\n  'offers': {\n    '@type': 'Offer',\n    'priceCurrency': 'USD',\n    'price': '99.99',\n    'itemCondition': 'https://schema.org/NewCondition',\n    'availability': 'https://schema.org/InStock'\n  }\n}));\n</script>","lang":"typescript","description":"This quickstart demonstrates how to set up `nuxt-jsonld` in `nuxt.config.ts` and use the `useJsonld` composable within a Vue component to define both static and reactive JSON-LD structured data.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}