CODEWITHSUNDEEP
javascriptvue.js
MattyRad
MattyRad

Reputation: 183

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 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?

Upvotes: 4

Views: 9368

Answers (4)

Daniele Testa
Daniele Testa

Reputation: 1647

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);

Upvotes: 2

exclsr
exclsr

Reputation: 3357

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
   }
}

Upvotes: 2

Siwei
Siwei

Reputation: 21549

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.

Upvotes: 1

MattyRad
MattyRad

Reputation: 183

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.

Upvotes: 5

Related Questions