CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
miqe
miqe

Reputation: 3369

Accessing $vuetify instance property from vuex store

I was using vuetify and wanted to change theme from vuex store using $vuetify instance but i got this error Cannot set property 'theme' of undefined"

here is my code 

export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      this.$vuetify.theme.primary = "#424242";
    }
  }
};

Upvotes: 12

Views: 9473

Answers (4)

Mehari
Mehari

Reputation: 3247

$vuetify is an instance property hence you can access any vue instance property using

Vue.prototype.$prop

For your case

import Vue from 'vue';
export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      Vue.prototype.$vuetify.theme.primary = "#424242";
    }
  }
};

Upvotes: 9

Temo
Temo

Reputation: 564

This one worked for me

...
toggleDarkTheme(state) {
   window.$nuxt.$root.$vuetify.theme.dark = true
}

Upvotes: 8

Samiullah Khan
Samiullah Khan

Reputation: 894

For Vuetify 2.0 you can try following method. (After following Vuetify 2.0 Upgrade guide for themes)

import Vuetify from './plugins/vuetify'

export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      Vuetify.framework.theme.themes.light.primary = "#424242";
    }
  }

Upvotes: 13

Rodrigo Duarte
Rodrigo Duarte

Reputation: 331

For Nuxt.js projects with Vuetify set as a buildModule, you can access $vuetify from the $nuxt property in the Vue instance:

import Vue from 'vue';
export actions = {
  yourAction() {
    Vue.prototype.$nuxt.$vuetify.theme.dark = true;
  }
}

Upvotes: 7

Related Questions