Sometimes, we want to use 2 instances of Axios with different base URL in the same app with Vue.js.

In this article, we’ll look at how to use 2 instances of Axios with different base URL in the same app with Vue.js.

How to use 2 instances of Axios with different base URL in the same app with Vue.js?

To use 2 instances of Axios with different base URL in the same app with Vue.js, we create 2 axios instances.

For instance, we write

const instance = axios.create({
  baseURL: "https://example.com/api/",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

to call axios.create to create an axios instance with a baseURL set.

We just repeat this with a different baseURL to create a new instance with the 2nd base URL.

Conclusion

To use 2 instances of Axios with different base URL in the same app with Vue.js, we create 2 axios instances.