Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
59 lines (47 sloc) 1.16 KB
title layout
Manipulating <head>
docs

We use vue-meta to manipulate <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.attributes.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'
      }
    ]
  })
}
You can’t perform that action at this time.