# vue-axios: binding axios to the Vue instance, and where that pattern creates friction

> vue-axios v3.6.0 registers axios as a global property on the Vue or app instance, so Options API components access it through this.axios or this.$http without per-file imports. Composition API setup functions cannot use this, so the pattern requires an extra provide step, and the injected reference is typed as any.

**imcvampire/vue-axios** — A small wrapper for integrating axios to Vuejs

- Repository: https://github.com/imcvampire/vue-axios
- Website: https://www.npmjs.com/package/vue-axios
- Stars: 1,996 · Forks: 176
- Language: JavaScript
- License: MIT
- Published: 2026-10-11 · Updated: 2026-10-11 · Language: en
- Canonical page: https://hysenlabs.com/projects/imcvampire-vue-axios

## vue-axios exists to remove per-component axios imports, a need that arose from a vue-resource migration

The README states the origin plainly: the author created vue-axios because they needed a simple way to migrate from vue-resource to axios in a Vue project. The solution was to bind axios to the Vue instance once at startup, so every component in the app can reach it without importing axios individually.

That design decision trades convenience for indirection. In an Options API component, the binding means you type `this.axios` instead of writing an import at the top of every file. For a large codebase with many components, that savings is real. For a project that already manages imports through a build tool, the difference is minor.

Where the trade-off becomes visible is in Vue 3's Composition API. The setup function does not have access to `this`, which is the mechanism vue-axios uses to expose the binding. The workaround the README documents adds two steps to the setup process that Options API components never need.

## Three property names register at install time: Vue.axios, this.axios and this.$http

When vue-axios registers, it attaches axios to the Vue or app instance under two property names: `axios` and `$http`. In Vue 2, those properties are reachable as `Vue.axios`, `this.axios` in a component, and `this.$http` in a component. All three point to the same axios instance that was passed to `Vue.use`.

The `$http` alias exists because vue-resource used that name, making vue-axios a drop-in for codebases migrating from that library. The README's original rationale names that migration explicitly.

In Vue 3 Options API, the same two properties are available on `this` inside a component. The `Vue.axios` form becomes `app.config.globalProperties.axios`, and the component-level `this.axios` and `this.$http` still work the same way. The names do not change between Vue 2 and Vue 3 within Options API, which is what makes the migration path straightforward in that context.

## npm install adds both packages; Vue 3 registration uses app.use instead of Vue.use

Install both packages together:

```bash
npm install --save axios vue-axios
```

Then import them in the application entry file. For Vue 3:

```js
import * as Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = Vue.createApp(...)
app.use(VueAxios, axios)
```

For Vue 2 the call is `Vue.use(VueAxios, axios)` on the global Vue constructor rather than an app instance. The second argument to `use` is the axios instance itself, not a configuration object, which differs from how most plugins accept their options.

After registration, an Options API component can call `this.axios.get(api)` or `this.$http.get(api)` without any additional import. The README also notes that a script-tag setup is possible by adding three scripts in order: vue, axios and vue-axios to the document, though it gives no further detail on that path.

## Composition API setup cannot use this, so provide and inject bridge the gap at the cost of any types

In Vue 3's Composition API, the setup function runs before the component instance is created, so `this` is undefined. To reach axios from setup, the README's pattern calls `app.provide` in the application entry file after the `app.use` call:

```ts
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)
```

Inside the component, the setup function then calls inject:

```ts
import { inject } from 'vue'

const axios: any = inject('axios')
```

The type annotation `: any` appears in the README's own example. That annotation means TypeScript no longer knows the shape of the axios object through this path. A caller that writes `axios.get(api)` gets no argument checking, no return type inference and no autocomplete from the axios type definitions. A direct import of axios in the same file would carry all of those.

This is the sharpest trade-off in the library. The convenience of skipping per-file imports costs full TypeScript type coverage through the inject path.

## Multiple instances use a key/value map, and each key needs its own provide call for Composition API

vue-axios supports registering more than one axios instance under different property names. Instead of passing a single axios instance to `use`, pass an object where each key is the property name and each value is the axios instance:

```js
app.use(VueAxios, { $myHttp: axios, axios2: axios2 })
```

In Options API components, `this.$myHttp` and `this.axios2` are then available. For Composition API, the README shows that each key needs its own `app.provide` call:

```ts
app.provide('$myHttp', app.config.globalProperties.$myHttp)
app.provide('axios2', app.config.globalProperties.axios2)
```

The README's comment on the Vue 2 and Composition API example contains a typo: it reads "or app.use() for Vue 3 Optiona API" where Optiona should be Options. This does not affect the code, but it is a sign that this part of the documentation received less review than the Options API sections.

For a project that needs to call different backend hosts with different configurations, the multiple-instance feature gives each host its own named client without shared state between them.

## The axios peer dependency is *, and Vue 2 and Vue 3 are both listed in peerDependencies

The package.json lists `"axios": "*"` as a peer dependency. The wildcard accepts any version of axios, which means npm will not warn if the installed version is from a much older major or a pre-release. Axios changed its default response handling behaviour across major versions, and a project that installs a mismatched version alongside vue-axios has no package-level guard to catch that.

Vue support covers both major versions: `"vue": "^3.0.0 || ^2.0.0"`. That range means npm will accept either a Vue 2 installation or a Vue 3 installation. The README shows separate code examples for each, and the usage paths differ at registration: `Vue.use` for Vue 2 and `app.use` for Vue 3.

Version 3.6.0 shipped on 2026-08-28; the prior release, 3.5.2, was from 2022-11-04, a gap of nearly four years that is worth weighing before adding this package to a production app.

## A direct axios import or a shared composable gives the same convenience with full TypeScript types

The alternative to vue-axios is importing axios directly at the top of each component file that needs it, adding one line per file but keeping full TypeScript type inference intact. Modern build tools and editors handle the direct import without any extra setup.

A shared composable achieves the same goal in Vue 3. Write a function that imports axios, configures any interceptors, and returns the instance; every component that calls that composable gets a fully typed axios reference back, with no global registration step and no provide/inject overhead.

vue-axios predates the composable pattern; its README credits the migration from vue-resource as its origin. For new projects starting on Vue 3, the composable pattern is the idiomatic path. For existing codebases built on Options API that already use vue-axios, the switching cost is real: every component that uses `this.axios` would need an import added. For new projects, a composable imports axios once at the module level and sidesteps the entire registration question.

## Conclusion

vue-axios suits Options API projects that want axios accessible globally without per-component imports. It is the wrong choice for a Vue 3 Composition API codebase, where the provide/inject step adds boilerplate that a direct axios import or a shared composable avoids. Before adopting it, check whether the * peer dependency for axios matches your version management expectations, since the constraint accepts any axios version without a floor. The TypeScript path through inject types the result as any, meaning full axios type definitions are not preserved, while a direct import carries them intact.

## FAQ

### What does vue-axios do?

vue-axios registers axios on the Vue or app instance as global properties, so Options API components can call this.axios or this.$http without importing axios in each file. It supports Vue 2 and Vue 3.

### How do I install vue-axios?

Run npm install --save axios vue-axios, then call app.use(VueAxios, axios) in your entry file for Vue 3, or Vue.use(VueAxios, axios) for Vue 2. Both axios and vue-axios must be installed together.

### How does vue-axios work with the Vue 3 Composition API?

Composition API setup functions cannot use this, so vue-axios alone is not enough. The README's pattern calls app.provide('axios', app.config.globalProperties.axios) after app.use, then uses inject('axios') inside the setup function. The result is typed as any.

### Can vue-axios manage multiple axios instances?

Yes. Pass an object to app.use instead of a single axios instance, where each key is the property name and each value is the axios instance. For Composition API, each key needs its own app.provide call after registration.

### What are the TypeScript limitations when using vue-axios with the Composition API?

The README's inject pattern types the result as any, losing all axios type definitions. A direct axios import in the same file would carry the full TypeScript type information.

## Sources

- [imcvampire/vue-axios on GitHub](https://github.com/imcvampire/vue-axios)
- [License: MIT](https://github.com/imcvampire/vue-axios/blob/master/LICENSE)
- [Project website](https://www.npmjs.com/package/vue-axios)
- [README](https://github.com/imcvampire/vue-axios/blob/master/README.md)
- [Releases](https://github.com/imcvampire/vue-axios/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/imcvampire-vue-axios