DEV Community

Cover image for Cleaning Your Vue Project With Vue-Clean
Miguel Manjarres
Miguel Manjarres

Posted on

Cleaning Your Vue Project With Vue-Clean

  • 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!


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 logo DevTony101 / vue-cli-plugin-clean

A plugin that helps you bootstrap your Vue application by doing some common configurations.



A plugin that helps you bootstrap your Vue application by doing some common configurations.


The primary goal of this plugin is to purge out all the files that come shipped in the views/ and components/ folder. By default, it also rewrites the Home.vue and App.vue components to just leave the minimum necessary to function.

Some additional features are:

  • Add support for base components: It is a good practice that you keep a handful of components that you are going to use across all your app (like buttons, form fields, etc). This plugin automatically adds global registering for your base components. It also adds a BaseIcon.vue file, a component that you can use to show SVG icons as recommended by Vue and finally it creates a icons.svg file on the public/ folder in which you can store all your icons. The file structure of your app will then…

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

Top comments (0)