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

Question

In most Vue.js tutorials, I see stuff like

new Vue({
  store, // inject store to all children
  el: '#app',
  render: h => h(App)
})

But I'm using vue-cli (I'm actually using quasar) and it declares the Vue instance for me, so I don't know where I'm supposed to say that I want store to be a "Vue-wide" global variable. Where do I specify that? Thanks

Answer 1

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:

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

Answer 2

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

Answer 3

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!

Answer 4

Slightly redundant to the aforementioned answer, but I found this to be simpler per the current Vuex state documentation at the time of this reply.

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      // example
    },
    state: {
      cdn_url: 'https://assets.yourdomain.com/'
    },

    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

...and then in your component, e.g. YourPage.vuex

export default {
  name: 'YourPage',
  loadImages: function () {
    img.src = this.$store.state.cdn_url + `yourimage.jpg`
  }
}

Answer 5

Joining the show a bit late, but the route I personally use in Quasar is to create a Boot file for my global constants and variables.

I create the Boot file (I call it global-constants.js but feel free to call it whatever).

/src/boot/global-constants.js

    import Vue from 'vue'

    Vue.prototype.globalConstants = {
      baseUrl: {
        website: 'https://my.fancy.website.example.com',
        api: 'https://my.fancy.website.example.com/API/v1'
      }
    }

    if (process.env.DEV) {
      Vue.prototype.globalConstants.baseUrl.website = 'http://localhost'
      Vue.prototype.globalConstants.baseUrl.api = 'http://localhost/API/v1'
    }

    if (process.env.DEV) {
      console.log('Global Constants:')
      console.log(Vue.prototype.globalConstants)
    }

Then add a line in quasar.conf.js file to get your Boot file to kick:

/quasar.conf.js

    module.exports = function (ctx) {
      return {
        boot: [
          'i18n',
          'axios',
          'notify-defaults',
          'global-constants' // Global Constants and Variables
        ],

Then to use it:

• from Vuex
  • this._vm.globalConstants.baseUrl.api
  • for example: axios.post(this._vm.globalConstants.baseUrl.api + '/UpdateUserPreferences/', payload)
• from Vue HTML page
  • {{ globalConstants.baseUrl.api }}
• from Vue code (JavaScript part of Vue page
  • this.globalConstants.baseUrl.api

Answer 6

An alternative Vue3 way to this answer:

// Vue3

const app = Vue.createApp({})
app.config.globalProperties.$appName = 'My App'

app.component('child-component', {
  mounted() {
    console.log(this.$appName) // 'My App'
  }
})