Getting error after successfully installiong axios vue plugin

Question

so I wanted to add Axios to a Vue project. I did that by issuing vue add axios. It told me, the installation was successful but then I somehow get 5 errors. I don't fully get why it tells me it was installed when it seems there are still some jobs going on and more important: What is this error about??

I guess that it actually installed Axios but it wasn't able to generate that default code it usually adds? Is that bad? Why does it add code? Why can't I just use it as kind of a dependency manager?

    $ vue add axios 
     WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
    ? Still proceed? Yes
      Installing vue-cli-plugin-axios...
    + vue-cli-plugin-axios@0.0.4
    updated 1 package and audited 25608 packages in 10.502s
    40 packages are looking for funding
      run `npm fund` for details
    found 0 vulnerabilities
    ✔  Successfully installed plugin: vue-cli-plugin-axios
      Invoking generator for vue-cli-plugin-axios...
    ⠋  Running completion hooks...error: 'options' is defined but never used (no-unused-vars) at src/plugins/axios.js:42:32:
  40 | );
  41 | 
> 42 | Plugin.install = function(Vue, options) {
     |                                ^
  43 |   Vue.axios = _axios;
  44 |   window.axios = _axios;
  45 |   Object.defineProperties(Vue.prototype, {


1 error found.

This is weird. If Axios is recommended to use with Vue3, why this issue hasn't been fixed since 2 years? — Dgloria, Apr 28 '22 at 08:37

Andres Abadia · Accepted Answer · 2020-03-25T14:45:32.483

I'm guessing, that you created a project and you are using eslint (Linter / Formatter) in it. This is a typical error from it. Just open to the src/plugins/axios.js File and get rid of the options variable on line 42. From:

Plugin.install = function(Vue, options) {

to:

Plugin.install = function(Vue) {

this should solve your problem and won't have any consequences. You're not using that variable anyway.

Axios was like it says successfully installed. After the installation a file is added to your project so you can use it for global request. The last version of this file was updated 2 years ago vue-cli-plugin-axios.

If you just want to add axios to your project as a dependency use npm install axios and then import it manually as always import axios from 'axios';

Maik col · Answer 2 · 2023-05-30T18:02:03.810

The 'Plugin' reference is deprecated.

It can be updated in the src/plugins/axios.js path like this:

import axios from "axios";

let config = { baseURL: "yourBaseURL", };
const _axios = axios.create(config);

_axios.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function (response) {
    // Do something with response data
    return response;
  },
  function (error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

export default {
  install: function (Vue) {
    Vue.axios = _axios;
    window.axios = _axios;
    Vue.config.globalProperties.$axios = _axios;
  },
};

Then in your main.js where you import { createApp } from 'vue' do next:

import { createApp } from 'vue'
import axios from'./plugins/axios'

createApp(App)
  .use(router)
  .use(axios)
  ... rest of your code

Getting error after successfully installiong axios vue plugin

2 Answers2