Manipulating <head>

We use vue-meta to manipulate the <head> element and the attributes for <html>, <head>, <body>.

Customize <head> per component

Use the head option in your Vue component:

export default {
  head: {
    title: 'Document title',
    meta: [
      {
        name: 'description',
        content: 'Page description'
      }
    ]
  }
}

head option can also be a function, for example, in a layout component:

export default {
  props: ['page'],

  head() {
    return {
      title: `${this.page.title} - ${this.$siteConfig.title}`
    }
  }
}

You can use this to access the component instance.

Set default values

In saber-browser.js, you can use setHead to set the head option for the root Vue instance. For example, you can use it to load Google Fonts that you want to apply in every page.

export default ({ setHead }) => {
  setHead({
    link: [
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Noto+Sans+HK&display=swap'
      }
    ]
  })
}
Last Edited on November 16, 2019 Edit This Page on GitHub