title: Vue.js - Making helper functions globally available to single-file components
body: <p>I have a Vue 2 project that has many (50+) <a href="https://v2.vuejs.org/v2/guide/single-file-components.html" rel="nofollow noreferrer">single-file components</a>. I use Vue-Router for routing and Vuex for state.</p>
  <p>There is a file, called <strong>helpers.js</strong>, that contains a bunch of general-purpose functions, such as capitalizing the first letter of a string. This file looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export default {
    capitalizeFirstLetter(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    }
  }
  </code></pre>
  <p>My <strong>main.js</strong> file initializes the app:</p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import VueResource from &quot;vue-resource&quot;
  import store from &quot;./store&quot;
  import Router from &quot;./router&quot;
  import App from &quot;./components/App.vue&quot;
  
  Vue.use(VueResource)
  
  const app = new Vue({
    router: Router,
    store,
    template: '&lt;app&gt;&lt;/app&gt;',
    components: { App },
  }).$mount('#app')
  </code></pre>
  <p>My <strong>App.vue</strong> file contains the template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;navbar&gt;&lt;/navbar&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        // stuff
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I then have a bunch of single-file components, which Vue-Router handles navigating to inside the <code>&lt;router-view&gt;</code> tag in the App.vue template.</p>
  <p>Now let's say that I need to use the <code>capitalizeFirstLetter()</code> function inside a component that is defined in <strong>SomeComponent.vue</strong>. In order to do this, I first need to import it:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;Some Component&lt;/template&gt;
  
  &lt;script&gt;
  import {capitalizeFirstLetter} from '../helpers.js'
  export default {
    data() {
      return {
        myString = &quot;test&quot;
      }
    },
    created() {
      var newString = this.capitalizeFirstLetter(this.myString)
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>This becomes a problem quickly because I end up importing the function into many different components, if not all of them. This seems repetitive and also makes the project harder to maintain. For example if I want to rename helpers.js, or the functions inside it, I then need to go into every single component that imports it and modify the import statement.</p>
  <p><strong>Long story short:</strong> how do I make the functions inside helpers.js <em>globally</em> available so that I can call them inside <em>any</em> component without having to first import them and then prepend <code>this</code> to the function name? I basically want to be able to do this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    data() {
      return {
        myString = &quot;test&quot;
      }
    },
    created() {
      var newString = capitalizeFirstLetter(this.myString)
    }
  }
  &lt;/script&gt;
  </code></pre>