use axios globally in all my components vue

vue.js axios vue-cli
FeRcHo picture FeRcHo · Feb 6, 2018 · Viewed 22.2k times · Source

I am testing with axios within a Vue application and the CLI. I've been using vue-resource and I could access it on all my components by simply passing it to Vue.use (VueResource). How can I achieve this with axios, so I do not have to import it into a component, but simply define it once in the main.js file?

Answer

Brandon Deo picture Brandon Deo · Feb 6, 2018

In main.js you can just assign Axios to $http.

main.js

import Axios from 'axios'

Vue.prototype.$http = Axios;

By modifying the vue prototype, any vue instance will have the ability to call $http on this. (e.g. this.$http.get('https://httpbin.org/get')

Note: $http is the axios object now, so any method you can call on axios object, you can call on this.$http.

Related questions

Change the default base url for axios

I have configured my axios like this const axiosConfig = { baseURL: 'http://127.0.0.1:8000/api', timeout: 30000, }; Vue.prototype.$axios = axios.create(axiosConfig) Inside my component i make a call as this.$axios.get('items').then().. Now the above works but i would like …

Read More
Axios catch error Request failed with status code 404

I'm testing a login component that uses Axios. I tried mocking Axios with axios-mock-adapter, but when I run the tests, it still errors out with: Error: Request failed with status code 404 How do I properly mock Axios in my tests? …

Read More
Force download GET request using axios

I'm using vuejs 2 + axios. I need to send a get request, pass some params to server, and get a PDF as a response. Server uses Laravel. So axios.get(`order-results/${id}/export-pdf`, { params: { ... }}) makes successful request but it does not …

Read More