I am using vue.js with vuetify. I have a value stored in state (using Vuex
) that is defined in scr/store/index.ts
(a boolean called darkMode
)which I use in one of my view components inside a .vue
file. I want, however, to use the same variable in the typescript
file in which I have my vuetify settings (src/plugins/vuetify.ts
). Is that even possible? I am new to vue.js/vuetify/typescript.
Here is a snippet of my code:
// src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
Vue.use(Vuetify);
export default new Vuetify({
theme: {
dark: darkMode, // <--- HERE IS WHERE I WANT TO USE MY VARIABLE FROM STATE
themes: {
light: {
primary: "#32A4A0",
secondary: "#C83C96",
background: "#FFFFFF",
border: "BEBEBE",
warning: "#FFE011",
error: "#F40808",
},
dark: {
primary: "#4EC0EB",
secondary: "#FF79C0",
background: "#353535",
border: "BEBEBE",
warning: "#FFE011",
error: "#F40808",
},
},
},
});
My folder structure looks like this:
src
---store
------index.ts
---plugins
------vuetify.ts
Thanks in advance!
Silly me. It was just a matter of importing the store object:
import store from "../store/index";