A Nuxt module to manage JSON-LD in Vue components. Requires Nuxt 4.
For older versions of Nuxt, use the matching major version of nuxt-jsonld:
- Nuxt 3:
nuxt-jsonld@2 - Nuxt 2:
nuxt-jsonld@1
$ npx nuxi module add nuxt-jsonldThis installs the package and registers it in nuxt.config.ts.
To do it by hand instead:
$ pnpm add nuxt-jsonld
# or
$ npm install nuxt-jsonld// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-jsonld'],
});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.
Of course, you can import explicitly from #jsonld.
<script lang="ts" setup>
// 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}`,
}));
</script>You can use the tagPosition: 'bodyClose' option on applicable tags to append them to the end of the <body> tag.
This option works the same as the one described in useHead.
default: head
useJsonld(
{
'@context': 'https://schema.org',
'@type': 'Thing',
name: 'static json',
},
{
tagPosition: 'bodyClose', // 'head', 'bodyOpen', 'bodyClose'
}
);The Options API is disabled by default. Enable it with optionsAPI: true.
Make a jsonld method to your Vue components and return structured data object.
<script lang="ts">
import type { WithContext, BreadcrumbList } 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<BreadcrumbList> {
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,
};
},
});
</script>Options API jsonld method is implemented using global mixin, so it is disabled by default.
Set this to true if you use it.
(default: false)
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-jsonld'],
'nuxt-jsonld': { optionsAPI: true },
});Or
// nuxt.config.ts
export default defineNuxtConfig({
modules: [['nuxt-jsonld', { optionsAPI: true }]],
});JsonLD, JsonLDFunc and UseJsonldOptions are exported from nuxt-jsonld.
For individual Schema.org types, import them from schema-dts.
import type { JsonLD, JsonLDFunc, UseJsonldOptions } from 'nuxt-jsonld';
import type { WithContext, Product } from 'schema-dts';If you don't need JSON-LD tag, just return null.
useJsonld(() => {
if (!props.product) {
return null;
}
return {
'@context': 'https://schema.org',
'@type': 'Product',
name: props.product.name,
};
});You can return multiple json data as an array.
[
{
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: [/* breadcrumb items */],
},
{
'@context': 'https://schema.org',
'@type': 'NewsArticle',
mainEntityOfPage: {/* article info */},
},
];Or use @graph notation. #247
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