Body & html attributes
Gridsome can use vue-meta to modify <body> and <head> attributes.
Change attributes globally
Global body or head attributes are added in src/main.js.
export default function (Vue, { head }) {
// Add attributes to HTML tag
head.htmlAttrs = { lang: 'en' }
// Add attributes to BODY tag
head.bodyAttrs = { class: 'custom-body-class' }
}Change attributes per page
Custom attributes per page are added inside .vue components.
For example, src/pages/About.vue would look something like this:
export default {
name: 'About',
metaInfo: {
title: 'About us',
htmlAttrs: {
lang: 'en',
},
bodyAttrs: {
class: 'custom-body-class'
}
}
}