<head>Gridsome uses vue-meta to populate Head.
Global head metadata is added in src/main.js by using head.{property}.push()
export default function (Vue, { head }) {
// Add inline CSS
head.style.push({
type: 'text/css',
cssText: '.some-custom-css {color: red}'
})
// Add an external CSS file
head.link.push({
rel: 'stylesheet',
href: 'https://some-server.com/external-styleheet.css'
})
// Add an external JavaScript before the closing </body> tag
head.script.push({
src: 'https://some-server.com/external-script.js',
body: true
})
// Add a meta tag
head.meta.push({
name: 'keywords',
content: 'HTML,CSS,XML,JavaScript'
})
}Page metadata is added inside page .vue components.
For example, src/pages/About.vue would look something like this:
<script>
export default {
name: 'About',
metaInfo: {
title: 'About us',
meta: [
{
name: 'author',
content: 'John Doe'
}
],
link: [
{
rel: 'stylesheet',
href: '/css/index.css'
}
]
// etc...
}
}
</script>If you wish to access this or data on a component/page, make metaInfo a function:
<script>
export default {
name: 'Post Template',
metaInfo() {
return {
title: this.$page.post.name,
meta: [
{ name: 'author', content: this.$page.post.author }
],
// etc...
}
}
}
</script>If you need to overwrite meta tags, add key property.
Gridsome is passing tagIdKeyName: 'key' to vue-meta as default option.
// parent component
{
metaInfo: {
meta: [
{
key: 'description',
name: 'description',
content: 'foo'
}
]
}
}
// child component
{
metaInfo: {
meta: [
{
key: 'description',
name: 'description',
content: 'bar'
}
]
}
}If you need to reference this in order to access props or data, simply declare metaInfo as a function instead of an object.
For example, if you want to use GraphQL data for metadata on a page, src/pages/MyPage.vue would look something like this:
<page-query>
query MyPage {
page(id: "1") {
title
description
}
}
</page-query>
<script>
export default {
name: 'MyPage',
metaInfo() {
return {
title: this.$page.title,
meta: [
{ name: 'description', content: this.$page.description }
]
// etc...
}
}
}
</script>| Property | Description | Link |
|---|---|---|
| style | Adds a style tag | Docs |
| script | Adds a script tag | Docs |
| meta | Adds a meta tag | Docs |
| title | Changes title text | Docs |
| titleTemplate | Dynamic title text | Docs |
| link | Adds a link tag | Docs |