A Nuxt.js plugin to manage jsonld in Vue component.
$ yarn add nuxt-jsonld
or
$ npm install nuxt-jsonld
// plugins/jsonld.js
import Vue from 'vue';
import NuxtJsonld from 'nuxt-jsonld';
Vue.use(NuxtJsonld);
// you can set the indentation
Vue.use(NuxtJsonld, {
space: process.env.NODE_ENV === 'production' ? 0 : 2, // default: 2
});
Then, add plugin config to nuxt.cofig.js
.
plugins: ['~/plugins/jsonld'],
Make a jsonld method to your Vue components and return structured data object.
<template>
...
</template>
<script>
export default {
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() {
const items = this.breadcrumbs.map((item, index) => ({
'@type': 'ListItem',
position: index + 1,
item: {
'@id': item.url,
name: item.text,
},
}));
return {
'@context': 'http://schema.org',
'@type': 'BreadcrumbList',
itemListElement: items,
};
},
};
</script>
🎉 You will get the jsonld tag! 🎉
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com",
"name": "top page"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/foo",
"name": "foo"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/foo/bar",
"name": "bar"
}
},
]
}
</script>
If you do not want to make jsonld tag, just return null;
<script>
export default {
props: ['foo'],
jsonld() {
if (!this.foo) {
return null;
}
return {
'@context': 'http://schema.org',
'@type': 'SomeType',
body: foo,
};
},
};
</script>
with Vue.extend
<script lang="ts">
export default Vue.extend({
jsonld() {
return {
'@context': "http://schema.org",
body: 'some text',
};
},
});
</script>
with vue-property-decorator
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Jsonld } from 'nuxt-jsonld';
@Jsonld
@Component
export default class Sample extends Vue {
jsonld() {
return {
'@context': "http://schema.org",
body: 'some text',
};
}
};
</script>