A few days ago some news about a popular npm package containing malicious code went viral. The whole incident is a reminder that we should think twice before adding another package to our dependencies.

It also reminded me of an unnecessary Vue plugin that I’ve seen pop up a few times. Vue‘s gentle learning curve makes it a popular choice with beginner developers, for whom it is even harder to figure out what to write themselves and what to install.

The offender

The package/plugin that I want to talk about is vue-axios. If you google “vue axios” it’s the first result. And I think that’s the main reason of it's popularity.

npm install --save axios vue-axios

// import Vue from 'vue'   // in Vue 2
import * as Vue from 'vue' // in Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

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

Let’s see what a plugin with 1000+ Github stars and 23,000 weekly downloads does. We can start by reading a description:

Usage:

This wrapper bind axios to Vue or this if you're using single file component.

There's also a code example which makes the use of the plugin even more clear:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

Basically, this package allows you to import axios once and then use it in every component.

It’s actually quite useful. Not only don't you have to import axios in every component but also you can create an axios instance with a custom config and use it in all of them. However, it’s not really mentioned in the plugin's description, therefore I’m not sure if people installing the plugin are even aware of that.

An alternative

We determined that this plugin can be really useful. So what is the problem? Let's code the same functionality without using the plugin:

import Vue from 'vue'
import axios from "axios";

Vue.prototype.$http = axios;
Vue.prototype.axios = axios;

Let's compare it with the code required to configure the plugin:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

As we can see it takes the same amount of lines to write the whole functionality ourselves as it takes to configure the plugin.

Let's finish by showing slightly supercharged version of this approach of using axios with Vue:

import Vue from 'vue'
import axios from "axios";

const instance = axios.create({
  baseURL: 'https://myapi.com'
});

const instanceUserApi = axios.create({
  baseURL: 'https://userapi.com'
});
instanceUserApi.defaults.headers.common["Authorization"] =
  "Token" + localStorage.getItem("authToken");

Vue.prototype.$http = instance;
Vue.prototype.$httpUserApi = instanceUserApi;

We can create several axios instances each with a different configuration. Not only the plugin doesn't provide any value but it also is less flexible than our code. Just to make it clear the plugin allows you to create many axios instances by passing an object during configuration.

The difference and the excuse

As described in this Github issue:
the different between Vue.prototype and vue-axios? #18

The plugin makes properties(axios and $http) immutable. Which for some may be an advantage over approach described in the previous paragraph. Nevertheless, I'm quite confident that the significant majority of developers using this plugin doesn't really care about immutability.

Conclusion

Vue-axios plugin does what it's description says. There's no dishonesty or anything malicious here in my opinion. Just some uninformed developers that don't think twice about what they add to their projects.

What do you think about such small plugins/packages?
Do you think that creator of such plugins should disclose the alternative?