Nuxt.js: tag BODY modification

Created on 1 Feb 2017 · 7Comments · Source: nuxt/nuxt.js

how to modify the tag BODY?
as described in the documentation https://github.com/declandewet/vue-meta
changes are not applied

_{This question is available on Nuxt.js community (#c158)}

Source

wormen

Most helpful comment

<script>
export default {
  head: {
    bodyAttrs: {
      class: 'home-page home page page-id-4 page-template page-template-template-homepage page-template-template-homepage-php'
    }
  }
}
</script>

Please read nuxt documentation

Atinux on 2 Feb 2017

👍26 ❤2 🎉1 😄1

All 7 comments

I will need an example to help you.

On Wed, 1 Feb 2017 at 20:19, Oleg Bogdanov notifications@github.com wrote:

how to modify the tag BODY?
as described in the documentation https://github.com/declandewet/vue-meta
changes are not applied

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/188, or mute the thread
https://github.com/notifications/unsubscribe-auth/AA3OFOt9H9JOiBMriqp9M66UdwPd0_mtks5rYNrLgaJpZM4L0RX1
.

Atinux on 1 Feb 2017

@Atinux

<body class="home-page home page page-id-4 page-template page-template-template-homepage page-template-template-homepage-php">

wormen on 1 Feb 2017

<script>
export default {
  head: {
    bodyAttrs: {
      class: 'home-page home page page-id-4 page-template page-template-template-homepage page-template-template-homepage-php'
    }
  }
}
</script>

Please read nuxt documentation

Atinux on 2 Feb 2017

👍26 ❤2 🎉1 😄1

Hello ! This works perfectly thanks @Atinux :) However, i'm using some custom page transitions and while page elements are leaving, body classes are removed and replaced only when the new page is done :( There is a small moment where there is no classes at all. You know if there is a way to trigger bodyAttrs: { class } when transition done() is called ?

Thanks :+1:

proov on 6 Aug 2017

@proov If you make that head parameter a function it becomes reactive, so whenever your data changes, the meta-data changes. E.g:

export default {
    data () {
        return {
            dataLoaded: false
        }
    },

    head () {
        return {
            bodyAttrs: {
                class: this.dataLoaded ? 'home-page home page page-id-4 page-template page-template-template-homepage page-template-template-homepage-php' : ''
            }
        }
    },

    // fetch data in some hook and set this.dataLoaded to true.
}