Vuex store reference Vuetify - "TypeError: Cannot read property 'theme' of undefined"

Viewed 873

I would like to change the prop of vuetify from the vuex store. From a component I can do this.$vuetify.theme.dark = true;. This is not possible in the store but unfortunately I get the same error when trying it like Vue.prototype.$vuetify.theme.dark = true;.

The error I get is Error in v-on handler: "TypeError: Cannot read property 'theme' of undefined".

In my main.js I have the following:

Vue.use(Vuetify);
const vuetify = new Vuetify({
  theme: {
    dark: true,
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5, // Added variable
      },
      dark: {
        primary: colors.blue.lighten3,
        // If using base color, be use to mark as such to get HEX value
        background: colors.indigo.base,
      },
    },
  },
});

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

I find it strange that $vuetify is undefined as I tried something similar with Vue.prototype.$socket.emit('my_event', { data: 'I\'m connected!' }); and this worked.

What could be the error here?

0 Answers
Related