Declarative JSON-LD Structured Data for Vue App. SSR supported
yarn add vue-jsonldimport VueJsonLD from 'vue-jsonld'
Vue.use(VueJsonLD)<template>
...
</template>
<script>
export default {
jsonld: {
"@context": "http://schema.org/",
"@type": "Code",
"name": "vue-jsonld",
"description": "Declarative JSON-LD Structured Data for Vue App",
"discussionUrl": "https://github.com/ariesjia/vue-jsonld"
},
}
</script><template>
...
</template>
<script>
export default {
data() {
return {
name: 'vue-jsonld'
},
}
jsonld() {
return {
"@context": "http://schema.org/",
"@type": "Code",
"name": this.name,
"description": "Declarative JSON-LD Structured Data for Vue App",
"discussionUrl": "https://github.com/ariesjia/vue-jsonld"
}
},
}
</script>server-entry.js
import app from './app'
const router = app.$router
const jsonld = app.$jsonld()
export default (context) => {
router.push(context.url)
context.jsonld = jsonld
return app
}index.template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
{{{ jsonld.html }}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>