Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ymmooot/nuxt-jsonld
A Nuxt.js module to manage JSON-LD in Vue component.
https://github.com/ymmooot/nuxt-jsonld
jsonld nuxt nuxt-module nuxtjs seo vue
Last synced: 2 days ago
JSON representation
A Nuxt.js module to manage JSON-LD in Vue component.
- Host: GitHub
- URL: https://github.com/ymmooot/nuxt-jsonld
- Owner: ymmooot
- Created: 2018-11-03T13:30:11.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-11T14:42:26.000Z (11 days ago)
- Last Synced: 2024-12-19T19:08:40.527Z (3 days ago)
- Topics: jsonld, nuxt, nuxt-module, nuxtjs, seo, vue
- Language: TypeScript
- Homepage:
- Size: 9.46 MB
- Stars: 320
- Watchers: 2
- Forks: 26
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# nuxt-jsonld
[](https://www.npmjs.com/package/nuxt-jsonld)
[](https://www.npmjs.com/package/nuxt-jsonld)
[](https://github.com/ymmooot/nuxt-jsonld/actions/workflows/test.yml)
[](https://codecov.io/gh/ymmooot/nuxt-jsonld)
[](https://dashboard.cypress.io/projects/8v9ivg/runs)
A Nuxt.js module to manage JSON-LD in Vue component.
Please read [`nuxt-jsonld@v1` document](https://github.com/ymmooot/nuxt-jsonld/blob/v1/README.md) if you are using Nuxt2.
## Installation
```bash
$ yarn add nuxt-jsonld
# or
$ npm install nuxt-jsonld
```
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-jsonld'],
});
```
## Usage
### Composition API
You can call `useJsonld` with a json object.
Alternatively, you can pass a function for a reactive json.
You 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).
Of course, you can import explicitly from `#jsonld`.
```vue
// You don't need to import explicitly.
// import { useJsonld } from '#jsonld';
// just pass a jsonld object for static jsonld
useJsonld({
'@context': 'https://schema.org',
'@type': 'Thing',
name: 'static json',
});
// pass a function which returns a jsonld object for reactive jsonld
const count = ref(0);
const countUp = () => {
count.value += 1;
};
useJsonld(() => ({
'@context': 'https://schema.org',
'@type': 'Thing',
name: `reactive json: count is ${count.value}`,
}));
```
#### tagPosition
You can use the `tagPosition: 'bodyClose'` option on applicable tags to append them to the end of the `` tag.
This option works the same as the one described in [useHead](https://nuxt.com/docs/getting-started/seo-meta#body-tags).
default: `head`
```ts
useJsonld(
{
'@context': 'https://schema.org',
'@type': 'Thing',
name: 'static json',
},
{
tagPosition: 'bodyClose', // 'head', 'bodyOpen', 'bodyClose'
}
);
```
### Options API
Make a jsonld method to your Vue components and return structured data object.
```vue
import type { WithContext, ListItem } from 'schema-dts';
export default defineComponent({
data() {
return {
breadcrumbs: [
{
url: 'https://example.com',
text: 'top page',
},
{
url: 'https://example.com/foo',
text: 'foo',
},
{
url: 'https://example.com/foo/bar',
text: 'bar',
},
],
};
},
jsonld(): WithContext<ListItem> {
const items = this.breadcrumbs.map((item, index) => ({
'@type': 'ListItem',
position: index + 1,
item: {
'@id': item.url,
name: item.text,
},
}));
return {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: items,
};
},
});
```
## Options
### disableOptionsAPI
Options API `jsonld` method is implemented using global mixin.
You can disable it if you don't use it.
(default: `false`)
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-jsonld'],
'nuxt-jsonld': { disableOptionsAPI: true },
});
```
Or
```ts
// nuxt.config.ts
export default defineNuxtConfig({
modules: [['nuxt-jsonld', { disableOptionsAPI: true }]],
});
```
## Tips
### Hide JSON-LD
If you don't need JSON-LD tag, just return null.
```ts
useJsonld(() => {
if (!props.product) {
return null;
}
return {
'@context': 'https://schema.org',
'@type': 'Product',
name: this.product.name,
};
});
```
### Multiple JSON-LD from one component
You can return multiple json data as an array.
```js
[
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [
/* breadcrumb items*/
],
},
{
'@context': 'https://schema.org',
'@type': 'NewsArticle',
mainEntityOfPage: {
/* article info */
},
},
];
```
Or use `@graph` notation. [#247](https://github.com/ymmooot/nuxt-jsonld/issues/247#issuecomment-579851220)
Note: 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)