title: Making axios global in Vue project is not working
body: <p>Until now, I had been importing axios in each Vue component where I wanted to make HTTP requests, like this.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script lang=&quot;ts&quot;&gt;
  import axios from 'axios';
  
  @Component
  export default class ExamplePage extends Vue {
    created(): void {
      axios.post(some_path);
    }
  }
  </code></pre>
  <p>However, now I want to define a global interceptor for all axios requests, basically to catch all <code>401 unauthorized</code> responses from the backend server (Rails) and log out the user.
  My understanding so far is that you must instantiate axios once and use it everywhere, instead of importing and using a different instance in each file.</p>
  <p>I've referred to <a href="https://stackoverflow.com/a/48652504/11249670">this</a> and <a href="https://stackoverflow.com/a/49288952/11249670">this</a>, and tried the below.</p>
  <pre class="lang-js prettyprint-override"><code>// application.js
  
  import '../assets/sass/base.sass';
  import App from '../app';
  import Vue from 'vue';
  import VueRouter from 'vue-router';
  import axios from 'axios';
  import router from '../routes';
  
  Vue.use(VueRouter);
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
    new Vue({
      el: '#application',
      router,
      render: (h) =&gt; h(App),
    });
  });
  
  axios.interceptors.response.use(
    response =&gt; response,
    error =&gt; {
      const status = error.response;
      if(status === 401) {
        // do stuff
      }
    }
  );
  
  Vue.prototype.$http = axios
  </code></pre>
  <p>When I tried to call <code>this.$http.put(...)</code> in another file, it said property <code>$http</code> doesn't exist (I'm guessing it's because <code>this</code> in the context of that component is the component itself, but I'm not sure). How can I fix this?</p>
  <p><strong>[UPDATE]</strong> Thanks to the responses, I decided to initialize an axios instance in a separate file and then use that instead. However, this is still not working. The 401 responses don't seem to be triggering the interceptor at all.</p>
  <p>Is there some additional configuration necessary?</p>
  <pre><code>// axios-instance.ts
  import axios, { AxiosInstance } from 'axios';
  
  const axiosInstance: AxiosInstance = axios.create();
  
  axiosInstance.interceptors.response.use(
    response =&gt; response.data,
    async function(error) {
      console.log(&quot;THIS IS THE 401 INTERCEPTOR&quot;)
      const status = error.response;
      if(status === 401) {
        // Log out user
      }
    }
  );
  
  export default axiosInstance;
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// Some component
  &lt;script lang=&quot;ts&quot;&gt;
  import axiosInstance from 'axios-instance';
  
  @Component
  export default class ExamplePage extends Vue {
    created(): void {
      axiosInstance.post(some_path);
    }
  }
  </code></pre>