Vue: App theming like in Vuetify?

Question

Vue.js

Hey guys!)

I'm trying to make theme switching like in Vuetify so that each component has the ability to get the $theme variable via this and set the class to the component, depending on the value of the theme variable.

A variable with a theme must be reactive, and called with a mutation, or some similar option, so that when the variable changes, the theme changes immediately + the new value of the variable must be sent to the server, respectively, through the action.

Here is what I tried:

import Vue from 'vue'
import store from '../store'

const install = (Vue) => {
  Vue.prototype.$theme = store.state.theme
}

Vue.use(install)

but it doesn't work as it should. the value in Vue.prototype.$theme is not an option to make it reactive, as I understand it, additional methods are needed ...

I don’t dare to implement through mixins and options, because I don’t understand why there are type checks in mixins:

function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}

what if I create a leak ..

and in general, as I understand it, when the value of the theme variable changes, all application components will be re-rendered, is this a good idea?

Please advise how I can implement this functionality.

Answer 1

You can use vuex to store the theme config there and get the one you need from the component. Then there will be reactivity.