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

Spread the love

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.

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.

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

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

Thanks man this helped a lot.
I got it working but could you write a tutorial on how to do it with three instances?

You can use axios.create to create as many instances as you want.