Populating <head>

Gridsome uses vue-meta to populate Head.

Add global head metadata

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'
  })
}

Add head meta data to pages & templates

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>

How to overwrite from child component

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'
      }
    ]
  }
}

Using props and data in metaInfo

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>

Available Properties

PropertyDescriptionLink
styleAdds a style tagDocs
scriptAdds a script tagDocs
metaAdds a meta tagDocs
titleChanges title textDocs
titleTemplateDynamic title textDocs
linkAdds a link tagDocs

Edit this page on GitHub