create global Axios configuration and add it to the Vue instance

Question

I added Axios to my Vue app via Vue UI dependency installation. I would like to access Axios within my components by using

this.$http.myHTTPmethod

So I created http.js based on this documentation

https://github.com/axios/axios#axioscreateconfig

import axios from "axios";

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default devInstance; // Check debug/build mode

My question:

How can I make axios use this axios instance? And how can I access this instance via this.$http like I would do with the Vue-Router (this.$router)?

Hammerbot · Accepted Answer · 2019-03-13 10:16:35Z

You could make a plugin:

import axios from "axios";
import Vue from 'vue'

const devInstance = createInstance("http://localhost:3000");
const productionInstance = createInstance("http://localhost:3000"); // will change later

function createInstance(baseURL){
    return axios.create({
        baseURL,
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.token}`
        }
    });
}

export default {
    install () {
        Vue.prototype.$http = devInstance
    }
}; // Check debug/build mode

And then your plugin into your main.js file, before creating your main Vue instance just like this:

import Vue from 'vue'
import http from './plugins/http.js'

Vue.use(http)
...

By doing this, you will have access to your axios instance from your components using this.$http

Collectives™ on Stack Overflow

create global Axios configuration and add it to the Vue instance

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related