title: How to Properly Register axios Globally in Vue & TypeScript Application
body: <p>I've been fighting with Vue, TypeScript and Axios and I cannot arrive at what feels like a satisfactory solution.</p>
  
  <p>Most guides will tell you to do this:</p>
  
  <p><strong>Main.ts</strong></p>
  
  <pre><code>import axios from 'axios';
  
  Vue.prototype.$http = axios;
  </code></pre>
  
  <p>And then use the $http.  TypeScript doesn't like this:</p>
  
  <blockquote>
    <p>Property '$http' does not exist on type CombinedVueInstance
  </blockquote>
  
  <p>How can I register axios globally and avoid any TypeScript errors?</p>
  
  <p>Based on @GentlemanCrow answer below I created a file in my root directory called:</p>
  
  <p>axios-plugin.d.ts</p>
  
  <pre><code>import _Vue from 'vue';
  import Axios from 'axios';
  
  export function AxiosPlugin&lt;AxiosPlugOptions&gt;(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
      // do stuff with options
      Vue.prototype.$http = Axios;
  }
  
  export class AxiosPluginOptions {
      // add stuff
  }
  
  import { AxiosStatic } from 'axios';
  
  declare module 'vue/types/vue' {
      interface Vue {
          $http: AxiosStatic;
      }
  }
  </code></pre>
  
  <p>This produces the error:</p>
  
  <p>(TS) An implementation cannot be declared in ambient contexts.</p>
  
  <p>And on <code>Vue.prototype.$http = Axios;</code> the error is:</p>
  
  <p>Statements are not allowed in ambient contexts.</p>
  
  <p>Removing the <code>export function AxiosPlugin</code> function and attempting to execute a request errors with:</p>
  
  <blockquote>
    <p>TypeError: "this.$http is undefined"</p>
  </blockquote>
  
  <p>Where should the following code go?</p>
  
  <pre><code>export function AxiosPlugin&lt;AxiosPlugOptions&gt;(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
      // do stuff with options
      Vue.prototype.$http = Axios;
  }
  </code></pre>