vue-metaでbodyにクラスを追加する

今回はbodyに対してclassタグを追加する方法です。

業務でmodal windowを実装する時に知った知見だったので、記事にしようと思いました。

実装方法

vue-metaにはdefaultでbodyAttrsという機能があります。（https://github.com/nuxt/vue-meta#bodyattrs-object）
こちらを使うとbody自体にclassなどを付与することができます。

サンプルコードは以下のような感じです。

<template>
  <div @click="clickHogeHoge"/>
</template>

<script>
export default {
  name: 'BaseHeader',
  head() {
    return {
      bodyAttrs: {
        class: this.isOpen ? 'body--fixed' : ''
      }
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    clickHogeHoge() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

clickHogeHogeというmethodでclickされたらフラグを切り替え、bodyAttrsにあるthis.isOpenがtrueだった場合bodyにbody--fixedというclassが付与されます。