Recently I have been working on a project that changes the background image on the body tag depending on which page the user is on. This is pretty easy to accomplish with jQuery but I did not want the overhead just to swap out a background image.

It turns out it is very easy to do:

export default {
  head () {
    return {
      bodyAttrs: {
        class: 'new-class'


The Nuxt head() method makes it very easy to update application header and html attributes using the Vue-Meta plugin. It also allows you to set attributes for the body  tag including classes.