Vue CLI Plugin Clean

A Vue 2.x plugin that helps you bootstrap your application by performing some common configurations.

Table of Contents

• Features
  • General
  • Support for base components
  • Prettier configuration
  • Automatic import for Vuex modules
• Usage
  • Getting started
  • Using the BaseIcon component
  • Using the basec command
    • Using basec through NPM scripts
    • Using basec through the Vue UI
• About
  • Why should you use this plugin?
  • FAQ

Features

General

The main goal of this plugin is to quickly set up a project by deleting some files and components created by the Vue CLI service. By default this plugin will:

• Delete everything in the components folder
• Delete everything in the views folder except the Home.vue file
• Re-write the router/index.js file to only include the route to the Home.vue file
• Re-write the App.vue file to remove all the boilerplate code

Support for base components

This an opt-in feature that you can enable when installing this plugin (go to the getting started section if you want to know more about that).

It is a good practice that you keep a handful of components that you are going to use across all your Vue application (like buttons, form inputs, etc). These type of components are called Base Components. Normally you would add them to the global scope by editing the main.js file but, if you chose to add this feature, this plugin automatically adds the necessary code to register base components to a process called global registering.

In addition to that, this plugin will create a base component called BaseIcon, a component you can use to display SVG icons effortlessly. If you want know how to use it, refer to the using the BaseIcon component section.

Lastly, this feature adds a new command to your project called basec that will let you create base components directly from the command line. If you wanna know more about that please refer to the using the basec command section.

After all the configurations are done, the file structure of your app will the look something like this:

  public
  ├── favicon.ico
+ ├── icons.svg
  ├── index.html
  src
  └── assets
  │   ├── logo.png
  └── components
  │   └── base
+ │       ├── BaseIcon.vue
  └── router
  │   ├── index.js
  └── store
  │   ├── index.js
  └── views
  │   ├── Home.vue
  ├── App.vue
  ├── main.js

Prettier configuration

This an opt-in feature that you can enable when installing this plugin (go to the getting started section if you want to know more about that).

If you chose Prettier as your code formatter, you might want to configure it with some additional tweaks. This plugin adds a .prettierrc.js configuration file to your root folder with some default options. (It will only surt effect if the @vue/eslint-config-prettier plugin is installed on your project).

// Default structure of the .prettierrc.js config file
module.exports = {
  trailingComma: "es5",
  vueIndentScriptAndStyle: true,
};

Automatic import for Vuex modules

If you use Vuex in your project, Vue Clean will create a folder called store/modules. Inside of it there will be an index.js file that will automatically export all of the files you create inside the folder! Say goodbye to those days where you had to manually import your modules inside the Vuex instance. What's even better, there's no configuration needed from your side, you can start using right out-of-the-box after Vue Clean has successfully been installed.

Usage

Getting started

Open your vue-cli project through your terminal and write:

vue add clean

After that, the vue-cli service will install the plugin and then ask you about some additional features you might want to add:

• Support for base components
• Additional prettier configuration

Both of those features are optional but beware, the vue-cli service will try to add them by default. When the configurations are complete, the plugin will notify you about what files were created, modified or deleted.

Using the BaseIcon component

The BaseIcon component renders an svg element that is located on the icons.svg file. The way you add a new svg elements is by writing the following inside the defs tags:

<symbol id="some_id" viewBox="...">
 <path d="..."/>
</symbol>

Then you can use the BaseIcon component like this:

<BaseIcon icon="some_id" />

The icon prop is required. Note that the value you pass to the icon prop must match the value you put on the id field of the svg element you want to render.

Using the basec command

When the support for the base components is added, the plugin adds a new vue-cli command called basec. The basec command lets you create a new base component directly from the command line.

Usage: vue-cli-service basec name [options]

Options:

  --scaffold-button  Generates a predefined base component for a button
  --prefix           The prefix for the name of the component. By default 'Base'

The name is the name of the base component (without 'Base' or any other prefix).

Examples

Creating a dummy base component

Let's say we want to create a 'dummy' base component for prototyping purposes. We would do as follows:

vue-cli-service basec dummy

When executed, the command will create a new base component called BaseDummy.vue.

Creating a scaffolded button component

Sometimes you would like to test your design quickly by adding new components. Among the most used components are buttons. The basec command lets you create a brand new button component, scaffolded with everything you would need:

• Binding for listeners
• Binding for attributes that are not inherited by the div container
• Some default styles and animations

Let's then say we want to create a BuyButton for an e-commerce site. We would do as follows:

vue-cli-service basec BuyButton --scaffold-button

When executed, the command will create a new base component called BaseBuyButton.vue.

Defining a different prefix

In certain cases you might want to define a different prefix than 'Base'. Although not recommended the basec command lets you define a different prefix like so:

vue-cli-service basec BuyButton --scaffold-button --prefix custom

When executed, the command will create a new base component called CustomBuyButton.vue.

Using basec through NPM scripts

You can also use the basec command through the npm script that is created when the plugin is installed. Be aware however, that if you want to pass the additional options seen in the previous section you must put them after a double dash like so:

npm run basec BuyButton -- --scaffold-button --prefix custom

This will have the same result as the previous example.

Using basec through the Vue UI

You can also use the basec command through the Vue user interface like so:

• In the UI, open your project and go to the Tasks section, in a newly created project there are going to be three basic commands: serve, build and lint. Vue Clean also adds a new command called basec.

• You can configure the options for the basec command in the modal window opened by the Parameters button. In the following example we are replicating the BaseDummy component we created in the previous section.

Now if you press the Run task button, the following message will appear on the console:

• Through the modal window you can also choose what template you want your component to use through a combobox element. In the following example we are replicating the CustomBuyButton we created in the previous section.

The result is the same as you would expect:

About

Why should you use this plugin?

Configuring a new Vue project can be tedious, deleting the autogenerated files, installing the necessary dependencies... This plugin aims to be your tool to aid you in that task, doing all the work so you can start your project as soon as possible. Also:

• It's dependency free: This plugin does not depend on any additional NPM package, making the plugin easy to install and without incrementing your node_modules folder size.
• It has a unique set of features: This plugin offers a unique set of tools and features that will help you create your next Vue project right away!

FAQ

What if I don't have vuex or vue-router?

You may have seen that in the directory graph above there are three folders: store/, router/ and views/ that are specific to vuex and vue-router respectively, does that mean that you have to have them installed in your project in order to use this plugin? No, they are put in there just as an example. These files: router/index.js, views/** and src/main.js will be created and/or modified only if they need to and if the user (you) agrees to.

What if I use a code formatter other than Prettier?

Currently, Vue Clean does not support other code formatters for additional configuration. This will be fixed in future versions.

What other options exist for scaffolding a base component?

Currently, Vue Clean only supports the button scaffolding. Form input based components are to be in next updates.