We use vue-meta to manipulate the <head>
element and the attributes for <html>
, <head>
, <body>
.
<head>
per component
Customize 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'
}
]
})
}
Troubleshooting
<meta>
tags
Duplicated By default Saber sets some head
tags for you if certain configurations are found in your config file, for example we set <meta name="description" content="...">
when siteConfig.description
is set in your config file.
To override the default tag, use the hid
option:
export default {
head: {
meta: [
{
name: 'description',
content: '...my description'.
// ⬇️ Here
hid: 'description'
}
]
}
}