Import Axios Method Globally in Vuejs

Question

this is my ~/plugins/axios.js file:

import axios from 'axios'

let api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

export default api

When I want to use axios in every components, I must have write this line:

import api from '~/plugins/axios

How can i config it globally, just write $api instead?

Solution 1

You can create a plugin and use it like this in your main.js file (if you're using something like vue-cli)

import axios from 'axios'

Vue.use({
    install (Vue) {
    Vue.prototype.$api = axios.create({
      baseURL: 'http://localhost:8000/api/'
    })
  }
})

new Vue({
    // your app here
})

Now, you can do this.$api.get(...) on every component method

Read more about Vue plugins here: https://vuejs.org/v2/guide/plugins.html

Provide/Inject could be an option as well: https://vuejs.org/v2/api/#provide-inject

Solution 2

There is a window object available to you in the browser. You can actively leverage that based on your requirements.

In the main.js file

import axiosApi from 'axios';

const axios = axiosApi.create({
    baseURL:`your_base_url`,
    headers:{ header:value }
});

//Use the window object to make it available globally.
window.axios = axios;

Now in your component.vue

methods:{
    someMethod(){
        axios.get('/endpoint').then(res => {}).catch(err => {});
    }
}

This is basically how I use axios globally in my projects. Also, this is also how Laravel uses it.

Comments

[Paul Brunache]

no point in polluting the global namespace, it's really bad practice.

[Viral Patel]

@PaulBrunache : I do not think it is a bad practice. Axios instance can be shared globally across all its components and the you can even have global interceptors and middleware for request and response to append or to filter certain request types. Also, the creator of Laravel does it in the same way in the Laravel core files. You can check that here github.com/laravel/laravel/blob/master/resources/js/…

[Paul Brunache]

There's no harm in importing it just where you need it. Making it global seems like laziness. However staying within vues ecosystem would be a better solution, via plugin, or simply overriding vue's http instance where you could to this.$http...

[Viral Patel]

@PaulBrunache : Over-riding the $http instance is a great idea.I agree on that with you. Making it globally available is to do with adding global interceptors/middleware for request and response objects when an xhr event occurs. i.e I can append a Authorization token to each request and transform error messages for each replies directly in the interceptor.

[Paul Brunache]

You can wrap it in a static class and pass the necessary parameters such as your token. In effect you're only importing it where you need which is a better alternative. Window objects should be a last resort and can get messy in debugging. I get what you're trying to do, but the point that i'm making is that polluting the global namespace can have weird side effects. Just my 2 cents

[Maks]

Thank you! Clear and working solution