Menu Close

How to Use Axios Globally in a Vue App?

Sometimes, we want to use the Axios HTTP client globally in our Vue app.

In this article, we’ll look at how to use the Axios HTTP client globally in our Vue app.

Using Axios Globally in a Vue App

To make Axios available globally, we can set it as the property of Vue.prototype before we create the Vue instance.

This way, it’ll be returned with the Vue instance if we create the Vue instance.

For example, we can write:

import Axios from 'axios'

Vue.prototype.$http = Axios;

Then in our components, we can access it by using the this.$http variable.

For instance, if we want to make a get request, we can write:

this.$http.get('https://example.com')

Conclusion

To make Axios available globally, we can set it as the property of Vue.prototype before we create the Vue instance.

Posted in vue