35

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?

Zhang Buzz
  • 10,420
  • 6
  • 38
  • 47
FeRcHo
  • 1,119
  • 5
  • 14
  • 27

4 Answers4

83

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.

Brandon Deo
  • 4,195
  • 4
  • 25
  • 42
  • where would put the axios interceptors in the project template... main.js? – Anoop Thiruonam Jun 14 '18 at 10:43
  • 4
    @Anoop.P.A They can be anywhere you want. If you didn't want to clutter `main.js` just put the statements into a lib/axios.js file or something and add all your interceptors, and then export the axios object, and you can assign it in main.js. – Brandon Deo Jun 14 '18 at 13:10
  • this works in every component, but not in vuex store, any idea how that may be accomplished? – Anuvrat Parashar Jan 28 '19 at 07:45
  • @AnuvratParashar just import axios directly into the store files – Brandon Deo Jan 28 '19 at 13:15
  • @bdeo that is what I am doing, however in this case, I have to explicitly set the authorization header repetitively. Feels like I am missing something very basic. – Anuvrat Parashar Jan 29 '19 at 14:59
  • 1
    @AnuvratParashar axios has `axios.defaults.headers.common['Authorization']` that you can set header values to. but that doesnt seem to be relevant to this question. – Brandon Deo Jan 29 '19 at 15:01
  • 1
    @AnuvratParashar Did you find out how to access $http in vuex store? I too have an issue with setting the Auth header in 2 places Thanks – Roark Jun 20 '19 at 10:11
  • 1
    @Roark I currently structure my ajax requests with axios or any other provider in a different way, more scalable in my opinion (works with vuex) if you want to ask a question about it for the link here and I will gladly help you – FeRcHo Aug 05 '19 at 21:12
  • 1
    Hi there, is this solution still safe since its answered 2 years ago? because its overriding the actual $http – aswzen Aug 01 '20 at 05:36
  • 1
    @aswzen there is no $http set on the vue prototype by default. This is a common paradigm used for utilities like this. It is still considered safe AFAIK. Vue-Resource was abandoned given axios provides a more flexible robust solution – Brandon Deo Aug 07 '20 at 14:01
8

NOTE: When Vue module is installed as a package and not using through CDN then this approach works fine else if importing Vue from CDN then we have both options, first the answer here and second is to import Vue in main.js and then use Vue.prototype.{variable}=Axios

For VUE3, you need to add below code:

Syntax:

app.config.globalProperties.{variable} = value;

Example:

app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get

In your main.js or app.js

/**
 * Importing libraries & componenets
 */
import { createApp } from 'vue';
import { createWebHistory, createRouter } from 'vue-router';
import Axios from 'axios';

/**
 * Vue initialization
 */
const app = createApp({
    components: { 
        Index 
    },
});

app.use(router);
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
app.mount('#app');

You can call the GET method same as VUE2 in your components: this.$http.get('https://httpbin.org/get')

invinciblemuffi
  • 908
  • 1
  • 11
  • 22
Mayank Dudakiya
  • 3,635
  • 35
  • 35
1

For all those who implement from zero (whithout deprecated vue-resource), another simple and efficient way, the "Laravel way" too.

In CLI run: npm install axios

In main.js define:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Accept'] = 'application/json';

and then you can use it in any component like this:

window.axios.get('https://example.com').then(r => console.log(r.data));

and capture r.data output

(if you use the Laravel routes instead of those of Vue you can use it like this: axios.get(url).then(...)

Alessandro
  • 409
  • 5
  • 12
0

What worked for me in the end was this:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(router)
app.use(VueAxios, axios)
app.mount('#app')

And I used this library: vue-axios

שמעון פוקס
  • 39
  • 7