Vue-CLI 4 (plugin) support

[TheJaredWilcurt]

The current docs for using PurgeCSS with Vue are outdated.

• https://purgecss.com/guides/vue.html

Vue-CLI 4 uses a vue.config.js file to abstract away anything WebPack related.

Though the documentation could be updated to reflect this, it would be far more convenient if there was a Vue-CLI Plugin for PurgeCSS. So all you have to do is type one command (or click one button) and it will be automatically set up for you.

Example of new Vue-CLI:

npm install -g @vue/cli && vue ui

In the above screenshot to add vue-cli-plugin-tailwind to your project, you could either click the item directly if the UI is open, or run the command vue add tailwind. The plugin will automatically install dependencies and update any files needed to allow your project to use the plugin. Some will even create a simple starter boilerplate example.

---

Desired resolution:

I think the existing docs are actually good for those that want to roll their own webpack solution instead of using the Vue-CLI. However, this will be a small minority of Vue devs. Most will be using the Vue-CLI to handle Webpack for them.

1. Create a Vue-CLI plugin
2. Update the docs to show how to install/use this plugin with Vue-CLI
3. Have a separate section of the page dedicated to "Manually installing", which can retain the existing documentation for the non-happy-path devs.

---

If creating a Vue-CLI plugin is too much work, then the docs should be updated to show how to install manually using the vue.config.js file instead of webpack.prod.conf.js file (which does not exist in Vue-CLI projects).

Though, if Purge CSS was available as a plugin I would probably use it by default in all of my projects, since it would be so easy to add.

[Ffloriel]

Thanks for the suggestion, that's a great idea. I went to look into how to create a Vue-CLI plugin. https://github.com/FullHuman/purgecss/tree/master/packages/vue-cli-plugin-purgecss I'll update the documentation next to show how to use it.