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 storeThen 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?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1487">#c1487</a>)</em></sub></div>