How to make night mode in Nuxt?

A

arctic072020-09-20 15:02:36

Vue.js

arctic07, 2020-09-20 15:02:36

The task is to make night mode in Nuxt without using libraries.
At first I decided to do it on props , but when it came to the component <Nuxt />I didn’t understand how to throw these props into it, namely boolean - data: () => ({ isNightMode: false })
Then I decided to make the state in Vuex in the store the same boolean isNightMode: false. And access to it by this.$store.state.vehicles.isNightMode. But I can’t figure out how to make all components react to a change in this boolean in the store.
How to do it better?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

drawnofmymind, 2020-09-20
@drawnofmymind

hmm, well, if through the store it can be like this:

<body>
<div id="app"
 :class={
'light': this.$store.state.vehicles.isNightMode
'night': !this.$store.state.vehicles.isNightMode
}
>
</body>