{"id":14964266,"url":"https://github.com/ymmooot/nuxt-jsonld","last_synced_at":"2025-05-14T21:03:49.600Z","repository":{"id":37549533,"uuid":"155985788","full_name":"ymmooot/nuxt-jsonld","owner":"ymmooot","description":"A Nuxt.js module to manage JSON-LD in Vue component.","archived":false,"fork":false,"pushed_at":"2024-12-11T14:42:26.000Z","size":9919,"stargazers_count":322,"open_issues_count":16,"forks_count":25,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T16:07:27.932Z","etag":null,"topics":["jsonld","nuxt","nuxt-module","nuxtjs","seo","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ymmooot.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-03T13:30:11.000Z","updated_at":"2025-03-21T16:56:44.000Z","dependencies_parsed_at":"2023-09-24T18:10:18.635Z","dependency_job_id":"08168051-7e11-4271-891a-1e2ba983620c","html_url":"https://github.com/ymmooot/nuxt-jsonld","commit_stats":{"total_commits":786,"total_committers":15,"mean_commits":52.4,"dds":0.5648854961832062,"last_synced_commit":"95c40bc9e6aafda17925b3abe027efe5253e21ba"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymmooot%2Fnuxt-jsonld","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymmooot%2Fnuxt-jsonld/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymmooot%2Fnuxt-jsonld/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymmooot%2Fnuxt-jsonld/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ymmooot","download_url":"https://codeload.github.com/ymmooot/nuxt-jsonld/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741206,"owners_count":21154254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsonld","nuxt","nuxt-module","nuxtjs","seo","vue"],"created_at":"2024-09-24T13:32:53.713Z","updated_at":"2025-04-13T16:07:35.057Z","avatar_url":"https://github.com/ymmooot.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# nuxt-jsonld\n\n[![version](https://img.shields.io/npm/v/nuxt-jsonld.svg)](https://www.npmjs.com/package/nuxt-jsonld)\n[![downloads](https://img.shields.io/npm/dt/nuxt-jsonld.svg)](https://www.npmjs.com/package/nuxt-jsonld)\n[![Test](https://github.com/ymmooot/nuxt-jsonld/workflows/Test/badge.svg)](https://github.com/ymmooot/nuxt-jsonld/actions/workflows/test.yml)\n[![codecov](https://codecov.io/gh/ymmooot/nuxt-jsonld/branch/master/graph/badge.svg)](https://codecov.io/gh/ymmooot/nuxt-jsonld)\n[![nuxt-jsonld](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/8v9ivg/master\u0026style=flat\u0026logo=cypress)](https://dashboard.cypress.io/projects/8v9ivg/runs)\n\nA Nuxt.js module to manage JSON-LD in Vue component.\n\nPlease read [`nuxt-jsonld@v1` document](https://github.com/ymmooot/nuxt-jsonld/blob/v1/README.md) if you are using Nuxt2.\n\n## Installation\n\n```bash\n$ yarn add nuxt-jsonld\n# or\n$ npm install nuxt-jsonld\n```\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-jsonld'],\n});\n```\n\n## Usage\n\n### Composition API\n\nYou can call `useJsonld` with a json object.  \nAlternatively, you can pass a function for a reactive json.\n\nYou can use `useJsonld` without importing, since it is provided as [Nuxt auto-imports functions](https://v3.nuxtjs.org/guide/concepts/auto-imports#nuxt-auto-imports).  \nOf course, you can import explicitly from `#jsonld`.\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\n// You don't need to import explicitly.\n// import { useJsonld } from '#jsonld';\n\n// just pass a jsonld object for static jsonld\nuseJsonld({\n  '@context': 'https://schema.org',\n  '@type': 'Thing',\n  name: 'static json',\n});\n\n// pass a function which returns a jsonld object for reactive jsonld\nconst count = ref(0);\nconst countUp = () =\u003e {\n  count.value += 1;\n};\nuseJsonld(() =\u003e ({\n  '@context': 'https://schema.org',\n  '@type': 'Thing',\n  name: `reactive json: count is ${count.value}`,\n}));\n\u003c/script\u003e\n```\n\n#### tagPosition\n\nYou can use the `tagPosition: 'bodyClose'` option on applicable tags to append them to the end of the `\u003cbody\u003e` tag.\nThis option works the same as the one described in [useHead](https://nuxt.com/docs/getting-started/seo-meta#body-tags).\n\ndefault: `head`\n\n```ts\nuseJsonld(\n  {\n    '@context': 'https://schema.org',\n    '@type': 'Thing',\n    name: 'static json',\n  },\n  {\n    tagPosition: 'bodyClose', // 'head', 'bodyOpen', 'bodyClose'\n  }\n);\n```\n\n### Options API\n\nMake a jsonld method to your Vue components and return structured data object.\n\n```vue\n\u003cscript lang=\"ts\"\u003e\nimport type { WithContext, ListItem } from 'schema-dts';\n\nexport default defineComponent({\n  data() {\n    return {\n      breadcrumbs: [\n        {\n          url: 'https://example.com',\n          text: 'top page',\n        },\n        {\n          url: 'https://example.com/foo',\n          text: 'foo',\n        },\n        {\n          url: 'https://example.com/foo/bar',\n          text: 'bar',\n        },\n      ],\n    };\n  },\n  jsonld(): WithContext\u003cListItem\u003e {\n    const items = this.breadcrumbs.map((item, index) =\u003e ({\n      '@type': 'ListItem',\n      position: index + 1,\n      item: {\n        '@id': item.url,\n        name: item.text,\n      },\n    }));\n    return {\n      '@context': 'https://schema.org',\n      '@type': 'BreadcrumbList',\n      itemListElement: items,\n    };\n  },\n});\n\u003c/script\u003e\n```\n\n## Options\n\n### disableOptionsAPI\n\nOptions API `jsonld` method is implemented using global mixin.  \nYou can disable it if you don't use it.  \n(default: `false`)\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-jsonld'],\n  'nuxt-jsonld': { disableOptionsAPI: true },\n});\n```\n\nOr\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [['nuxt-jsonld', { disableOptionsAPI: true }]],\n});\n```\n\n## Tips\n\n### Hide JSON-LD\n\nIf you don't need JSON-LD tag, just return null.\n\n```ts\nuseJsonld(() =\u003e {\n  if (!props.product) {\n    return null;\n  }\n  return {\n    '@context': 'https://schema.org',\n    '@type': 'Product',\n    name: this.product.name,\n  };\n});\n```\n\n### Multiple JSON-LD from one component\n\nYou can return multiple json data as an array.\n\n```js\n[\n  {\n    '@context': 'https://schema.org',\n    '@type': 'BreadcrumbList',\n    itemListElement: [\n      /* breadcrumb items*/\n    ],\n  },\n  {\n    '@context': 'https://schema.org',\n    '@type': 'NewsArticle',\n    mainEntityOfPage: {\n      /* article info */\n    },\n  },\n];\n```\n\nOr use `@graph` notation. [#247](https://github.com/ymmooot/nuxt-jsonld/issues/247#issuecomment-579851220)\n\nNote: Safari will log an error to the console when using an array to describe multiple data. While the library functions correctly, please exercise caution if you are aggregating error logs with tools like Sentry. To avoid this issue, use `@graph`. [#1280](https://github.com/ymmooot/nuxt-jsonld/issues/1280)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymmooot%2Fnuxt-jsonld","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fymmooot%2Fnuxt-jsonld","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymmooot%2Fnuxt-jsonld/lists"}