Use axioms globally in all my vue components

Question

I am testing with axes in a Vue application and CLI. I use a vue resource and I can access it on all my components by simply passing it to Vue.use (VueResource). How can I achieve this with axios, so I don’t need to import it into the component, but just define it once in the main.js file?

Answer 1

In main.js, you can simply assign Axios $ http.

main.js

import Axios from 'axios'

Vue.prototype.$http = Axios;

By modifying the vue prototype, any vue instance will be able to invoke $httpon this. (eg,this.$http.get('https://httpbin.org/get')

Note: $httpit is now an axios object, so any method that you can call for the axios object can be called this.$http.