With Vue-cli, where do I declare my global variables? With Vue-cli, where do I declare my global variables? vue.js vue.js

With Vue-cli, where do I declare my global variables?


Yea, you can set those variables like this, in your entrypoint file (main.js):

Vue.store= Vue.prototype.store = 'THIS IS STORE VARIABLE';

and later access it in your vue instance like this:

<script>export default {  name: 'HelloWorld',  methods: {    yourMethod() {        this.store // can be accessible here.    }  }}</script>

You can also see this in the vue-docs here.

Edit 1:

from the discussions in the comment sections about "no entrypoint file" in quasar's template.

what you can do is, to go to src/router/index.js, and there you will be able to get access to Vue, through which you can set a global variable like this:

...import routes from './routes'Vue.prototype.a = '123';Vue.use(VueRouter)...

and then if you console.log it in App.vue, something like this:

<script>export default {  name: 'App',  mounted() {        console.log(this.a);  }}</script>

now, look at your console:enter image description here

You can also do the same in App.vue file in the script tag.


We could add the Instance Properties

Like this, we can define instance properties.

Vue.prototype.$appName = 'My App'

Now $appName is available on all Vue instances, even before creation.

If we run:

new Vue({  beforeCreate: function() {    console.log(this.$appName)  }}) 

Then "My App" will be logged to the console!


You don't need to make the store a global variable like that, as every component (this.$store) and the Vue instance itself have access to the store after the initial declaration.

Take a look at the Quasar docs for App Vuex Store.

store.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    updateCount(state) {      state.count += 1    }  }})

main.js

import App from './App.vue'import store from '/path/to/store.js'new Vue({  el: '#app',  store,  render: h => h(App)})

If you need to access the store from within a component you can either import it (as we did in main.js) and use it directly [note that this is a bad practice] or access using this.$store. You can read a bit more about that here.


In any case here's the official Getting Started guide from Vuex team