current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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?

share|improve this question
up vote 3 down vote

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.

share|improve this answer
1  
Good solution! You can also check out vuex for application-wide data management github.com/vuejs/vuex – Jeff Mar 22 '16 at 0:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.