• How many times have you created a new Vue project using vue-cli and then sighed when it's done because you have to delete the pre-built files and components?

• How many times you had to do the same configuration for base components in all the Vue projects you created?

• How many times you had to manually create configuration files for code formatters like prettier or frameworks like tailwind?

Wouldn't be nice if you could do all this with just one command? If the answer is yes, then this vue-cli plugin is for you!

Introducing vue-cli-plugin-clean

Just like you, whenever I had to create a new Vue project, I had to repeat the same steps to get the right setup, and that included:

• Installing the same base dependencies
• Deleting pre-built Vue components and views
• Creating and modifying configuration files (.eslintrc.js, .prettierrc.js, etc)
• Configuring base components

Soon enough I became tired and decided to automate this process, and that's when I came up with the idea for this plugin!

Features

So what does exactly this plugin does for you?

• The primary goal of this plugin is to clean your project, that is, to delete all components and views except Home.vue and App.vue
• Even though it does not delete them, the plugin rewrites Home.vue and App.vue to have the minimum amount of functional code

This happens by default but there are a set of functions that are optional (and honestly recommended):

• Base Components: If you are building a complete front-end app, chances are you are using at least one component across all your project and is a good practice to group those components under a common umbrella called base components. These base components are supposed to be global (by definition), but in order to make Vue recognize them as such, you need to make some changes, but no need to worry, vue-cli-plugin-clean does it for you!

• Prettier: If you chose Prettier as your code formatter, this plugin will also create a configuration file for it with two useful pre-configured options. I included Prettier because it's the tool I used the most, but I know it's not the only one and I wish that, in future versions, this plugin offers support to all those tools.

• Tailwind: If for any reason, you want to use Tailwind as your CSS Framework, you may know that you need to install the necessary dependencies and create some configuration files, and while yes there are already some tools that do this thing, this plugin offers its own solution so you don't have to install any additional tools. I included Tailwind because it's the framework I used the most, but it's not the only one (there's Bulma, for example), so I hope that, in future versions, this plugin offers support to all of them.

If you need more information, head up to the plugin's repository here:

About the development

This plugin's still in development (hence, there's no version 1.0.0 just yet), but a functional version is already released (version 0.1.10) and it's uploaded on npm! (this is also my first npm package 🎉) I would love some feedback about the functionality and usefulness of the plugin, I really think this could help some beginners and even some seniors in Vue!

Thank you so much for reading! I hope for your feedback! See you next time 👋.