{"id":12421,"library":"vue-cli-plugin-axios","title":"Vue CLI Axios Integration Plugin","description":"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.","status":"abandoned","version":"0.0.4","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","Axios","axios","vue-axios","vue","plugin"],"install":[{"cmd":"npm install vue-cli-plugin-axios","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-axios","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-axios","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core HTTP client library this plugin integrates.","package":"axios","optional":false},{"reason":"Runtime dependency for Vue CLI projects, which this plugin modifies. It's an implicit peer dependency.","package":"@vue/cli-service","optional":false}],"imports":[{"note":"After installing the plugin, `this.$axios` becomes available on Vue instances for global HTTP requests in Vue 2 (Options API).","symbol":"$axios","correct":"this.$axios.get('/api/data')"},{"note":"Standard way to import Axios directly in any module or component, especially in Vue 3 Composition API or for local instances.","symbol":"axios","correct":"import axios from 'axios'; axios.post('/api/submit', data);"},{"note":"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.","wrong":"Vue.prototype.$axios.get('/api/users');","symbol":"Vue.axios","correct":"Vue.axios.get('/api/users');"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\nimport store from './store';\n\n// Assuming vue-cli-plugin-axios was added to a Vue CLI 3 project (Vue 2 or 3 compatible at the time)\n// This plugin typically modifies `main.js` or creates a plugin file like `src/plugins/axios.js`.\n// The core part of the plugin injects Axios globally.\n\n// Example of what the plugin would achieve (simplified representation):\nimport axios from 'axios';\n\nconst app = createApp(App);\n\n// If using Vue 2 with this plugin, it would be Vue.use(Plugin, axios)\n// For Vue 3, if the plugin were updated, it might use globalProperties\n// (This specific plugin is for Vue CLI 3, often used with Vue 2, or early Vue 3 setup)\n\n// Manual global Axios setup for modern Vue 3 (alternative to old plugin):\napp.config.globalProperties.$axios = axios;\napp.config.globalProperties.$http = axios;\n\napp.use(store);\napp.use(router);\napp.mount('#app');\n\n// Example component usage in a .vue file (Options API for Vue 2, compatible with plugin's intent):\n/*\n<template>\n  <div>\n    <button @click=\"fetchData\">Fetch Data</button>\n    <pre>{{ responseData }}</pre>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      responseData: null,\n      error: null,\n    };\n  },\n  methods: {\n    async fetchData() {\n      try {\n        const result = await this.$axios.get('https://jsonplaceholder.typicode.com/todos/1');\n        this.responseData = result.data;\n      } catch (e) {\n        this.error = e;\n        console.error('Error fetching data:', e);\n      }\n    },\n  },\n};\n</script>\n*/","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"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.","severity":"breaking","affected_versions":"All versions"},{"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.","message":"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.","severity":"deprecated","affected_versions":"All versions"},{"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.","message":"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.","severity":"breaking","affected_versions":"axios@1.14.1, axios@0.30.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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) {`.","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.","error":"error: 'options' is defined but never used (no-unused-vars) at src/plugins/axios.js"},{"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`).","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`.","error":"TypeError: Cannot read properties of undefined (reading '$axios')"}],"ecosystem":"npm"}