Press "Enter" to skip to content

How to remove a Vue CLI 3 plugin from your Vue project

You have an existing Vue project project and you’ve already installed a few Vue CLI 3 plugins. But, there’s one plugin in particular that you don’t need anymore.

The CLI lets you easily add plugins with the vue add command, but there’s no option to easily remove them.

In this post, I’m going to show you the steps you can take to remove a Vue CLI 3 plugin from your project.

Commit before you install a plugin

Before we get started, the Vue CLI 3 documentation recommends that you always commit any changes to git before you install any new plugins.

A plugin has multiple duties in your project. First, it can modify your package.json file and add extra packages into the node_modules folder. Next, a Vue CLI 3 plugin can be a file generator. This file generator can create new files and potentially make changes to your already-existing files.

Warning to commit up on the Vue CLI 3 documentation.

As much as possible, always commit your changes to git before installing a plugin. If anything goes wrong you can always go back to your previous changes.

Manually uninstalling a plugin

But, what if you’re already far into a project and going back to a previous commit isn’t an option?

I’m going to run through a scenario of the steps you might have to take to uninstall a plugin. Every plugin makes different changes and adds different files so each one will be different.

In the following example, I’m going to use Apollo, but they can apply to any other plugin. Let’s get started.

1) Uninstall the plugin package using NPM or Yarn

First, uninstall the plugin manually using NPM or Yarn. You can run npm uninstall vue-cli-plugin-apollo and that will remove the packages associated with that plugin.

NPM

npm uninstall vue-cli-plugin-apollo -D

Yarn

yarn remove vue-cli-plugin-apollo

2) Manually remove all modified and created files from the plugin

If you try to serve your project by running npm run serve it most likely won’t work immediately. You’ve already removed the vue-cli-plugin-apollo¬†package using NPM or Yarn.

Now, you’ll have to go in and manually remove all of the changes that the plugin made to your plugin.

For example, the apollo plugin adds a src/vue-apollo.js file and makes changes to src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { createProvider } from './vue-apollo'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  provide: createProvider().provide(),
  render: h => h(App)
}).$mount('#app')

If you remove the import from the apollo plugin and then remove the provide option this will make sure your project works again.

Now it’s just a matter of continuing to remove dependencies on the plugin from your code.

Conclusion

The fact that plugins can modify files and modify existing files is what makes it more difficult to remove a plugin than add one.

I used the Apollo plugin as an example, but every plugin is different and will make different changes. There might be more or less changes that you’ll have to make.

Thank you for reading and if you have any extra questions let me know on Twitter.

Comments are closed.