title: Creating a global variable in Vue.js
body: <p>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 <code>inherit: true</code> on any component that requires the data of its parent.</p>
  
  <p>Vue.js 1.0 removed the ability to use <code>inherit: true</code>. Understandably, you really shouldn't be inheriting everything everywhere all the time.</p>
  
  <p>This is something of a problem upgrading from 0.12 to 1.0 however. I've got components littered with <code>inherit</code>, most only so that it can get the important config variable <code>baseurl</code> from the root component. Such a variable should definitely by known by any component that has a link in it.</p>
  
  <p><code>&lt;a href="{{ baseurl }}/page"&gt;Link&lt;/a&gt;</code></p>
  
  <p>I <em>could</em> pass the prop for config to every single component, but that really seems redundant and clunky.</p>
  
  <p><code>&lt;c0 :config="{baseurl: 'example.com'}"&gt;&lt;/c0&gt;</code></p>
  
  <p><code>&lt;c1 :config="config"&gt;&lt;/c1&gt;</code></p>
  
  <p><code>&lt;c2 :config="config"&gt;&lt;/c2&gt;</code></p>
  
  <p><code>&lt;c3 :config="config"&gt;&lt;/c3&gt;</code></p>
  
  <p>Any good way to create a global scope for all components?</p>