Akshansh Khare

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'
    }
  }
}
← Page transitionsGridsome CLI →