How does one uninstall a plugin?

[Worthaboutapig]

What problem does this feature solve?

There does not appear to be any way to remove a plugin in vue ui. The list of plugins on the dashboard don't have a trash icon next to them, as the dependencies list do have. There's no information on whether it's even possible to remove a plugin.

Can't find anything in the existing issues, and this StackOverflow post doesn't have a solution beyond 'hack about and uninstall it manually'. (https://stackoverflow.com/questions/50155541/remove-plugins-with-vue-cli3)

If there is a way, it doesn't appear to be documented, if there isn't, there should be.

What does the proposed API look like?

A vue remove <plugin> command with a corresponding trash can icon in the plugins list.

[LinusBorg]

Currently, vue remove X would do nothing else than npm uninstall X. There's no "cleanup" API so far. Might be a good idea.

[Worthaboutapig]

Could this be documented, given that an explicit add command implies there's stuff going on that an npm uninstall X might not deal with?

[Akryum]

Plugins can add and modify your project files. It's already quite difficult especially if you change the whole project structure. I don't think it's worth the trouble to have something similar that deletes and modifies files back to the previous state. There is 99% chances that the files would have been modified in the mean time. Also, you have git to check what the plugin changed and we recommend using it everywhere (including in the UI).

[Worthaboutapig]

@Akryum If plugins are install-only, that doesn't seem a good idea long-term. One would only ever have more and more plugins and if one decided, for-instance, that a new kind of plugin handled a situation better than an existing one, or covered more cases, one would have two plugins competing with each other. Sounds like the project would easily become borked.

Aren't plugins meant to be self-contained and when adding and removing files, isn't that limited to files they know about?

[Akryum]

They aren't install-only: you can uninstall them using yarn or npm and clean up the files they added/modified (for example with git). My point is there isn't an automatic way of doing this, we don't have an IA to do that (yet?).

[LinusBorg]

Extending what @Akryum said:

Aren't plugins meant to be self-contained and when adding and removing files, isn't that limited to files they know about?

While a good design principle, that's hardly possible.

• created files have to be imported into other, existing files...
• or need other modifications in other files to work
• The files you created and the ones the plugin created are yours to change, combine and replace once you installed the plugin.
• etc. pp,

So unless we re-invent a git-like system to track changes introduced by a plugin, removing files it created without breaking your app is hardly possible.

[Worthaboutapig]

They aren't install-only: you can uninstall them using yarn or npm and clean up the files they added/modified (for example with git). My point is there isn't an automatic way of doing this, we don't have an IA to do that (yet?).

Ok.

[nparley]

I think it would be nice to add vue remove x to give the plugin the ability to do some clean up. Even if the default is just running npm uninstall x. I think if you have an add, users expect the remove.

Also as an example I set up my project with mocha and want to move to jest, it would be nice if removing mocha would also remove it's injected task. Also I could even be asked if I want the created files to be removed. I can see what the plugin has done by reading https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-unit-mocha/generator/index.js. Having old configs / files hanging around from removed plugins might lead to problems. At the very least you could warn the user (when running vue remove x) "this might not remove all configuration changes made by the plugin it is recommended to use git to roll back plugin changes"

The other thing could be a vue add --dry-run which outputs what the plugin is going to do, which would help in the removal / clean up.

P.S. @Akryum keep up the great work and nice talk at vuejs.london!

[Worthaboutapig]

One thing I noticed is that webpack config changes made by plugins get left behind when the package is uninstalled, which means if the same configuration item is reused it may appear to not be working, as vue inspect will show that there are two versions of the same key- the one left behind by a plugin and a new one created, unbeknownst to a new configurator.

[LinusBorg]

webpack config changes made by plugins get left behind when the package is uninstalled

I can't really imagine how that would happen, since the changes to the webpack config are made on the fly from the plugin 's index.js file - which would be gone once the plugin is uninstalled.

[Worthaboutapig]

Ok, I'll have to investigate that further and see how it's happening.

[stevensanborn]

Recently I did something dumb. I just added vuetify to my little personal signup project following the quick start directions. I probably should not have clicked something in the cli, because, Ughh it was a mess with a bunch of errors. Once i saw existing templates changed, and webpack with no undo I realized the gravity of what just happened. Best to rollback and redo. I thought a plugin was an addon or extension. This experience has rattled me on plugins. So yes ,imo it would be nice to be able to pull out a plugin and limit its powers if you have to.

this is what i saw. :

`Successfully invoked generator for plugin: vue-cli-plugin-vuetify
The following files have been updated / added:

 .amplifyrc
 amplify/#current-cloud-backend/amplify-meta.json
 amplify/#current-cloud-backend/analytics/lambdatest/parameters.json
 amplify/#current-cloud-backend/analytics/lambdatest/pinpoint-cloudformation-template.json
 amplify/#current-cloud-backend/auth/cognito1/cognito95306251-cloudformation-template.yml
 amplify/#current-cloud-backend/auth/cognito1/parameters.json
 amplify/#current-cloud-backend/hosting/S3AndCloudFront/template.json
 amplify/.config/aws-info.json
 amplify/.config/project-config.json
 amplify/backend/amplify-meta.json
 amplify/backend/analytics/lambdatest/parameters.json
 amplify/backend/analytics/lambdatest/pinpoint-cloudformation-template.json
 amplify/backend/auth/cognito95306251/cognito95306251-cloudformation-template.yml
 amplify/backend/auth/cognito95306251/parameters.json
 amplify/backend/awscloudformation/nested-cloudformation-stack.yml
 amplify/backend/hosting/S3AndCloudFront/template.json
 src/aws-exports.js
 src/components/Login.vue
 src/components/Signup.vue
 src/plugins/vuetify.js
 src/routes/index.js
 babel.config.js
 package-lock.json
 package.json
 src/App.vue
 src/assets/logo.png
 src/components/HelloWorld.vue
 src/main.js`

[LinusBorg]

Well there's a big warning in the docs, looking like this:

WARNING

It is recommended to commit your project's current state before running vue add, since the command will invoke the plugin's file generator and potentially make changes to your existing files.

[stevensanborn]

Hmm yeah , this needs a big ol catch all disclaimer ... it does not sound safe. I thought it would just expose some components/ new functionality but literally changed every file and even broke it . To call that a plug-in imo is misleading. I would expect “deep project manipulations” like this to be a more associated with cli.