Vue CLI Axios Integration Plugin

0.0.4 · abandoned · verified Sun Apr 19

The `vue-cli-plugin-axios` package is a small, specific plugin designed to integrate the Axios HTTP client into projects scaffolded with Vue CLI 3. Released at a very early version (0.0.4) and last published over five years ago, this plugin is considered abandoned. It aimed to simplify global Axios access within Vue 2 applications by injecting `$axios` or `Vue.axios` onto the Vue instance or prototype. However, its relevance is significantly diminished as Vue CLI itself is now in maintenance mode, with new Vue projects (both Vue 2 and Vue 3) encouraged to use Vite via `create-vue`. Modern Vue 3 projects typically integrate Axios by directly installing the `axios` package and importing it explicitly where needed, or by manually attaching it to `app.config.globalProperties` as a custom plugin. There are also actively maintained wrapper libraries like `vue-axios` (version 3.x.x for Vue 3, 2.x.x for Vue 2) that provide similar global injection capabilities for contemporary Vue ecosystems. This specific `vue-cli-plugin-axios` package does not offer any distinct advantages over direct Axios integration or current wrapper libraries for modern development.

Common errors

```
error: 'options' is defined but never used (no-unused-vars) at src/plugins/axios.js
```
cause After installing `vue-cli-plugin-axios`, ESLint flags the `options` parameter in the generated plugin file (`src/plugins/axios.js`) as unused, indicating a linting issue with the plugin's boilerplate.

fix Edit `src/plugins/axios.js` (or similar plugin file) and remove the `options` parameter from the `Plugin.install` function signature. Change `Plugin.install = function(Vue, options) {` to `Plugin.install = function(Vue) {`.
```
TypeError: Cannot read properties of undefined (reading '$axios')
```
cause Attempting to access `this.$axios` in a Vue component before the `vue-cli-plugin-axios` (or an equivalent global plugin) has correctly registered Axios with the Vue instance, or if using Vue 3 without explicitly attaching it to `globalProperties`.

fix Ensure the plugin is correctly installed and registered in your `main.js` (or `main.ts`). For Vue 3, ensure `app.config.globalProperties.$axios = axios` is set if you intend to use `this.$axios`. Verify that Axios itself is installed (`npm install axios`).

Warnings

breaking The package `vue-cli-plugin-axios` is effectively abandoned (last update over 5 years ago) and targets Vue CLI 3, which is now in maintenance mode. For new projects, Vue CLI has been superseded by Vite, and this plugin is not compatible with Vite-based setups.
Fix: For new Vue 3 projects, use `create-vue` to scaffold a Vite project. Install `axios` directly via `npm install axios` and import it locally, or manually attach it to `app.config.globalProperties`.
deprecated Global injection of Axios via `Vue.prototype.$axios` (as done by this plugin) is generally discouraged in modern Vue 3 for better type inference and testability. The Composition API favors local imports or providing/injecting instances.
Fix: Prefer `import axios from 'axios'` in components or utility files. If global access is necessary in Vue 3, use `app.config.globalProperties.$axios = axios` during app creation, and then access with `getCurrentInstance().appContext.config.globalProperties.$axios` in setup or `this.$axios` in Options API.
breaking The upstream `axios` package itself experienced a significant supply chain attack on March 31, 2026, affecting versions `1.14.1` and `0.30.4`. These versions contained malicious code.
Fix: Immediately roll back any deployments using affected Axios versions. Pin `axios` to safe versions (`1.14.0` or `0.30.3` or earlier) or update to patched versions if available. Flush local npm caches (`npm cache clean --force`). Review CI/CD logs for `npm install` executions that might have picked up these versions.

Install

npm install vue-cli-plugin-axios npm
yarn add vue-cli-plugin-axios yarn
pnpm add vue-cli-plugin-axios pnpm

Imports

$axios
```
this.$axios.get('/api/data')
```
After installing the plugin, `this.$axios` becomes available on Vue instances for global HTTP requests in Vue 2 (Options API).
axios
```
import axios from 'axios'; axios.post('/api/submit', data);
```
Standard way to import Axios directly in any module or component, especially in Vue 3 Composition API or for local instances.
Vue.axios
wrong:
```
Vue.prototype.$axios.get('/api/users');
```
correct:
```
Vue.axios.get('/api/users');
```
The plugin also typically exposes `Vue.axios` directly. Accessing via `Vue.prototype.$axios` is how it's often set up under the hood but not the intended direct usage.

Quickstart

This quickstart demonstrates the typical installation command for a Vue CLI plugin and how `this.$axios` would be used in a Vue component after the plugin globally attaches Axios. It also shows a modern, manual global Axios setup for Vue 3, as the plugin itself is deprecated.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// Assuming vue-cli-plugin-axios was added to a Vue CLI 3 project (Vue 2 or 3 compatible at the time)
// This plugin typically modifies `main.js` or creates a plugin file like `src/plugins/axios.js`.
// The core part of the plugin injects Axios globally.

// Example of what the plugin would achieve (simplified representation):
import axios from 'axios';

const app = createApp(App);

// If using Vue 2 with this plugin, it would be Vue.use(Plugin, axios)
// For Vue 3, if the plugin were updated, it might use globalProperties
// (This specific plugin is for Vue CLI 3, often used with Vue 2, or early Vue 3 setup)

// Manual global Axios setup for modern Vue 3 (alternative to old plugin):
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$http = axios;

app.use(store);
app.use(router);
app.mount('#app');

// Example component usage in a .vue file (Options API for Vue 2, compatible with plugin's intent):
/*
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre>{{ responseData }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      responseData: null,
      error: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const result = await this.$axios.get('https://jsonplaceholder.typicode.com/todos/1');
        this.responseData = result.data;
      } catch (e) {
        this.error = e;
        console.error('Error fetching data:', e);
      }
    },
  },
};
</script>
*/

view raw JSON →