Cleaning Your Vue Project With Vue-Clean
Tags: javascript, vue, showdev, webdev
Published: 2020-09-17 16:01:50

- 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:

{% github https://github.com/DevTony101/vue-cli-plugin-clean %}

### 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 👋.