Home

Issue: 1662

Proper strategy for binding a class to <html>

[issue link]

I couldn’t see a way to do this even through my layout file; I want to add a class to the <html> tag that does overflow: hidden !important when a modal is present so that I can prevent scrolling in the background.

I figure since I have modals in different components I would use vuex to globally communicate:

my store/index.js

import Vuex from 'vuex'

const store = () => new Vuex.Store({
  state: {
    modal: false,
  },
  mutations: {
    modalOn (state) {
      state.modal = true
      document.getElementsByTagName('html')[0].classList.add('is-clipped')
    },
    modalOff (state) {
      state.modal = false
      document.getElementsByTagName('html')[0].classList.remove('is-clipped')
    },
  },
})
export default store

Then in my component I add a watcher that hits these mutations when the modal is on/off:

  watch: {
    'modal' (value) {
      if (value) {
        this.$store.commit('modalOn')
      } else {
        this.$store.commit('modalOff')
      }
    },
  },

Am I doing it wrong? is there a better approach?

This question is available on Nuxt.js community (#c1487)