JSON+LD is a great way to add structured data to your website. This is especially useful for SEO purposes. This package allows you to easily add JSON+LD to your Vue application.
But why not just add the JSON+LD directly to the HTML?
Because the JSON+LD Data needs to be within a <script> tag.
And Vue does not allow you to add a <script> tag within the template.
Further it is comperatively hard to put the JSON+LD data into the head of the document.
Run npm or yarn installation of the vue3-json-ld package:
$ yarn add vue3-json-ld$ npm install vue3-json-ld// App.vue
import { createApp } from 'vue'
import App from './App.vue'
import Vue3JsonLD from 'vue3-json-ld';
const app = createApp(App)
app.use(Vue3JsonLD)
app.mount('#app')<template>
<vue-json-ld>
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Google",
"url": "http://www.google.com",
"sameAs": [
"http://www.facebook.com/google",
"http://www.twitter.com/google"
]
}
</vue-json-ld>
</template><template>
<vue-json-ld :json-ld="jsonLdObject" />
</template>
<script setup>
import { ref } from 'vue';
const jsonLdObject = ref({
"@context": "http://schema.org",
"@type": "Organization",
"name": "Google",
"url": "http://www.google.com",
"sameAs": [
"http://www.facebook.com/google",
"http://www.twitter.com/google"
]
});
</script>This places the JSON LD in the head of the document. This is useful for SEO purposes.
<vue-json-ld :head="true" :json-ld="jsonLdObject" />
This is the JSON+LD object that you want to render.
<vue-json-ld :json-ld="jsonLdObject" />
You can simply pass your json+ld String as the default slot (between the component tags):
<vue-json-ld>
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Google",
"url": "http://www.google.com",
"sameAs": [
"http://www.facebook.com/google",
"http://www.twitter.com/google"
]
}
</vue-json-ld>