タイトルの通り、今回はNuxt.jsのプロジェクトでbody要素についたclassを動的に変更する方法についてまとめていきたいと思います。使用ケースとしては、サイト全体のテーマを変更するときにbodyのclassを切り替えるという場合などが考えられます。Nuxt.jsにはbody要素の属性値をコントロールできる仕組みが用意されているので今回はそれを使って試してみたいと思います。   まずは、body要素に付与するclass名をstateで管理していきます。こうすることでどのコンポーネントからでも変更できるようにします。storeディレクトリ直下のスクリプトに下記のようにメソッドを記述していきます。 【store/index.js】

export const state = () => ({
  bodyClass: 'default'
})
export const mutations = {
  bodyClass(state, payload) {
    state.bodyClass = payload
  }
}
export const actions = {
  changeBodyClass({ commit }, payload) {
    return commit('bodyClass', payload)
  }
}
export const getters = {
  bodyClass: (state) => state.bodyClass,
}

  この際にstateの値には初期値のclass名を入れておくといいかと思います。そして続いてはテンプレート側でclassを切り替える処理を作成していきます。どのページテンプレートやコンポーネントでも構いませんが、今回はサンプルとしてとりあえずインデックスページのテンプレートに実装しています。ここではラジオボタンでそれぞれclass名を値に持たせて、それを切り替えることで対応したclass名が設定されるという仕組みにしています。テンプレート側にはラジオボタンの要素に、class名を渡してあげる関数をchangeイベントで発火するようにしています。 【index.vue】

<template lang="pug">
  div
    label #[input(type="radio" @change="className('default')" checked)] default
    label #[input(type="radio" @change="className('hoge')")] hoge
    label #[input(type="radio" @change="className('huga')")] huga
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['bodyClass'])
    },
    methods: {
      ...mapActions(['changeBodyClass']),
      className(value) {
        this.changeBodyClass(value)
      }
    },
    head() {
      return {
        bodyAttrs: {
          class: this.bodyClass
        }
      }
    }
  }
</script>

  そしてスクリプト側では、ラジオボタンから受け取った値をstateの値に更新するようにしておきます。最後にポイントとなるのが、headオプションで「bodyAttrs」というキーの値を使うことでbody要素の属性を設定することがです。ここでclass属性の値にstateで更新された値を入れることで、ラジオボタンで切り替えた値がbody要素のclass名に適用されるようになっています。   実際に切り替わるところを確認してみます。各コンポーネントファイルが読み込まれた初期状態ではclass名もstateで設定していた値が入っているのがわかります。   そしてラジオボタンで切り替えてみると、そのタイミングでbody要素のclass名も変わっているのが確認できました。   もちろん、stateの値などもあわせて切り替わっているのが確認できますね。  

---

  今回はNuxt.jsでbody要素のclass名を動的に切り替える方法についてまとめてみました、実は当コーポレートサイトも実はこの仕組みを使ってclass名を切り替えています。テーマデザインを変える時などに便利かと思いますので、ぜひ試してみてはいかがでしょうか。