My current project is a Gridsome framework using vue-meta to manage my metadata. For the most part, this is working just fine, however, I am having a hard time getting my JSON+LD to render.
All the data is being stored and served from a CMS. Inside that CMS I have a text field that I am putting my JSON into:
{
"@context": "https://json-ld.org/contexts/person.jsonld",
"@id": "http://dbpedia.org/resource/John_Lennon",
"name": "John Lennon",
"born": "1940-10-09",
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
Within my project, I have set my vue-meta as such:
metaInfo () {
let tags = [];
if (this.$context?.fields?.slug?.length) {
tags.push({
name: 'canonical',
content: `https://www.abcd.com${this.$context?.fields?.slug}`
});
}
if (this.$context?.fields?.metadataFields?.title?.length) {
tags.push({
property: 'og:title',
content: this.$context?.fields?.metadataFields?.title
});
tags.push({
name: 'twitter:title',
content: this.$context?.fields?.metadataFields?.title
});
}
return {
title: this.$context?.fields?.metadataFields?.title || 'Blue',
titleTemplate: '%s | Or else',
meta: tags,
script: [
{type: 'application/ld+json',
json: this.$context?.fields?.jsonLd?.content[0].content[0].value || {}
}
]
};
What is giving me issues is the last script tag in the return:
script: [
{type: 'application/ld+json',
json: this.$context?.fields?.jsonLd?.content[0].content[0].value || {}
}
]
In its current form, yes I expect it to render the JSON as a text, however, this was only so I could launch the project. If I change it by adding a JSON.parse() JSON.parse(this.$context?.fields?.jsonLd?.content[0].content[0].value), it will fail with the error:
SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>).
Thinking that it may have to do with vue-meta not liking the parse, I added a mounted function, and did the parsing there. On production, this too returned a string variable as my JSON+LD
if (this.$context.fields.jsonLd){
let dd = JSON.stringify(this.$context.fields.jsonLd.content[0].content[0].value);
this.parsedLD = JSON.parse(dd);
}
}
If I start it locally using npm run dev I have no problems with the JSON.parse() it is only when it is served from the server that I am seem to have the issues.