Creating a global variable in Vue.js

Question

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 of its parent.

Vue.js 1.0 removed the ability to use inherit: true. Understandably, you really shouldn't be inheriting everything everywhere all the time.

This is something of a problem upgrading from 0.12 to 1.0 however. I've got components littered with inherit, most only so that it can get the important config variable baseurl from the root component. Such a variable should definitely by known by any component that has a link in it.

<a href="{{ baseurl }}/page">Link</a>

I could pass the prop for config to every single component, but that really seems redundant and clunky.

<c0 :config="{baseurl: 'example.com'}"></c0>

<c1 :config="config"></c1>

<c2 :config="config"></c2>

<c3 :config="config"></c3>

Any good way to create a global scope for all components?

MattyRad · Accepted Answer · 2016-03-22 20:08:17Z

5

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.

edited Mar 22, 2016 at 20:08

answered Mar 21, 2016 at 22:37

MattyRad

1831 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeff Over a year ago

Good solution! You can also check out vuex for application-wide data management github.com/vuejs/vuex

spetsnaz Over a year ago

how could we define those config variables then?

exclsr · Accepted Answer · 2017-09-04 00:54:44Z

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:

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

config.setColor('green');

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

config.js:

var color = 'blue';

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

thing.js:

import config from './config.js'

export default {
   name: 'thing',
   template: '<div>thing</div>',
   created: function () {
      console.log(config.getColor());
      // green
   }
}

Daniele Testa · Accepted Answer · 2021-04-22 19:21:33Z

2

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.

new Vue({
  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);

answered Apr 22, 2021 at 19:21

Daniele Testa

1,7173 gold badges19 silver badges36 bronze badges

Comments

Siwei · Accepted Answer · 2017-03-02 07:46:41Z

1

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 easily
const API = this.$config.API

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

answered Mar 2, 2017 at 7:46

Siwei

21.9k7 gold badges84 silver badges103 bronze badges

Collectives™ on Stack Overflow

Creating a global variable in Vue.js

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related