Creating A Global Variable In Vue.js

In Vue.js 0.12, it was easy enough to pass a variable from the root component all the way down to its children: you just use inherit: true on any component that requires the data o

Solution 1:

This might not be the best solution out there, but it works and isn't too much trouble. I just set a getter prototype method.

Vue.prototype.$config = function (key) { 
  var config = this.$root.$get('config');

  if (config) {
    return config[key];
  } 

  return'';
}

<a href="{{ $config('baseurl') }}/page">Link</a>

Accessible by any component.

Solution 2:

If you're using something like webpack in your Vue setup, then you can share a variable across your project with ES6 modules / import statements.

main.js:

importVuefrom'vue'import config from'./config.js'import thing from'./thing.js'

config.setColor('green');

var vm = newVue({
   el: "#app",
   components: { thing },
   template: '<thing></thing>'
});

config.js:

var color = 'blue';

exportdefault {
   getColor: function () {
      return color;
   },
   setColor: function (val) {
      color = val;
   }
}

thing.js:

import config from'./config.js'exportdefault {
   name: 'thing',
   template: '<div>thing</div>',
   created: function () {
      console.log(config.getColor());
      // green
   }
}

Solution 3:

take a look at : vue-config

npm install vue-config

const vueConfig = require('vue-config')
const configs = {
  API: 'http://localhost:6003'// It's better to require a config file
}

Vue.use(vueConfig, configs)

// A param named `$config` will be injected in to every // component, so in your component, you can get config easilyconst API = this.$config.API

vuex may be too heavy for defining constant. however, once your problem solved, you must take a look at Vuex.

Solution 4:

It's very easy. All you need to do is to set it in the "data" area in your "main.js" file. I am not sure why all other answers are complicating things.

newVue({
  data: {
    API: "http://localhost:8080"
  },
  router,
  vuetify,
  render: h =>h(App)
}).$mount('#app')

And then in any component, you access it through "this.$root"

console.log(this.$root.API);