Plugins and Presets for Vuejs project

 Read our previous blogs to create Vue project with CLI Services. In this article, we have included plugins and presets for Vuejs project in order to create Vue CL project more extensible and flexible. Here you will understand how to use plugins and presets to optimize your project. 

Plugins

The best part of Vue CLI project is that it uses plugin-based architecture. When you inspect a new project package.json, you will see that the dependencies start with @vue/cli-plugin-. Plugins help you to modify the configuration of the internal webpack and add commands to vue-cli-service. You can see many features listed during the process of project creation are implemented as plugins. 

You can take help from Plugin Development Guide and get more information related to developing a plugin.  

Instal plugins in an existing project

Each CLI plugin is correlated with a generator (responsible to create files) plus a runtime plugin (which improves the core webpack config and adds commands). Now if you use vue create in order to create a new Vue project, some of the plugins will be preinstalled on your system according to the feature selection. 

If you want to install a plugin on an already existing project, use vue add command. 

vue add eslint

Note: The vue add command is designed especially for installing and adding Vue CLI plugins. This plugin is not created to replace the normal npm packages. To use normal npm packages, you need to use your package manager of choice. 

Use @vue/eslint command to resolve the full package name @vue/cli-plugin-eslint, install this package from npm and call its generator:

# these are equivalent to the previous usage vue add cli-plugin-eslint

If you don’t use use @vue prefix, it will resolved unscoped package instead. For install, use this prefix to install the third party plugin vue-cli-plugin-apollo:

# installs and invokes vue-cli-plugin-apollo vue add apollo

This third-party plugin can also work under a specific scope. For instance, if you are using plugin name @foo/vue-cli-plugin-bar, you can add this plugin with:

vue add @foo/bar

Pass the generator to the already installed plugin (you don’t have to provide prompts)

vue add eslint --config airbnb --lintOn save

In case the plugin is already installed, just skip the installation and call its generator along with the vue invoke command. The command complies with the same prompts as vue add. 

Project local plugin

These plugins will help you create Vue app more relevant and flexible. In case you don’t want to create a new plugin and need access to plugin API for your project, you can conveniently use the option vuePlugins.service in your package file: 

{   "vuePlugins": {     "service": ["my-commands.js"]   } }

Taking plugin API as first argument and enable each file to export a function. You can get more information on plugin API in Plugin Development Guide. 

Additionally, you can add more files that will act as a UI plugin with the vuePlugins.ui option. 

{   "vuePlugins": {     "ui": ["my-ui.js"]   } }

Presets

In order to save the user from having to go through the prompts to choose parameters and plugins, Vue CLI presets are JSON objects that include pre-defined options and plugins for starting a new project.

The configuration file located in your user home directory (/.vuerc) contains presets that were saved during vue create. This file can be directly edited to modify, add, or remove the saved presets.

Here is a prepared illustration:

{   "useConfigFiles": true,   "cssPreprocessor": "sass",   "plugins": {     "@vue/cli-plugin-babel": {},     "@vue/cli-plugin-eslint": {       "config": "airbnb",       "lintOn": ["save", "commit"]     },     "@vue/cli-plugin-router": {},     "@vue/cli-plugin-vuex": {}   } }

Plugin generators create the necessary project files using the predefined data. You can provide additional configuration for integrated tools in addition to the fields mentioned above:

{   "useConfigFiles": true,   "plugins": {...},   "configs": {     "vue": {...},     "postcss": {...},     "eslintConfig": {...},     "jest": {...}   } }

Depending on the option of useConfigFiles, these extra configurations will either be merged into package.json or the relevant config files. For instance, the value of configs.vue will be merged into vue.config.js when "useConfigFiles" is set to true.

Preset Plugin Versioning

You can specify versions of the plugins that are used:

{   "plugins": {     "@vue/cli-plugin-eslint": {       "version": "^3.0.0",       // ... other options for this plugin     }   } }

Remember that this is not needed for official plugins and when these plugins are omitted, the CLI will automatically use the current version available in registry section. 

Allow Plugin Prompts

Each plugin has the ability to inject its own prompts into the project setup process, but when you use a preset, Vue CLI believes that all of the plugin parameters have already been stated in the preset.

In other circumstances, you might want the preset to simply declare the desired plugins while still giving the user some latitude by letting them respond to the plugin-injected questions.

You can provide "prompts" for such instances by saying: true in a plugin's settings to permit the injection of its prompts:

{   "plugins": {     "@vue/cli-plugin-eslint": {       // let the users pick their own ESLint config       "prompts": true     }   } }

Create a project using Vue.js: Beginners Guide

Learn to build an application using Vue.js with CLI in easy steps. Follow the steps to create a basic Vuejs app without hustle. 

Prerequisites

Install Node.js on Windows. It will allow you to install Vue.js by using Node Package Manager (npm).

Install Vue.js

In order to install Vue.js on your system:

Open the command prompt

Create a project folder: mkdir VueProjects and now enter that directory: cd VueProjects

Use Node Package Manager (npm) and install Vue.js. 

PowerShell

npm install vue

Note: Use the command vue --version and check the version of Vue.js before installing it.

Install Vue CLI

Vue CLI is a tool in the Vue command line/ terminal that helps you to create an interactive project. It allows you to quickly scaffold a new Vuejs project, manage a project using Vue UI, or prototype brand-new ideas 

Use npm to install Vue CLI. You need to use the -g flag to install globally and upgrade (vue upgrade --next): 

PowerShell

npm install -g @vue/cli

Step 1: Create a project

In order to create a new project, run the below command

vue create hello-world

Note: In case you use Git Bash with minTTY on Windows, the above command might not work. You need to enter a command winpty vue.cmd create hello-world. If you still want to use the above command, then you can alias the syntax by adding the below line to your ~/.bashrc file. Use alias vue='winpty vue.cmd' and restart your Git Bash terminal session to update bashrc file. 

You will be required to select a preset. Either select the default preset that comes along with a Babel + ESLint, or choose “Manually selected features” and you can easily pick features that you need. 

                                          Source: Vue CLI

To quickly prototype your new project, use the default setup. The manual setup provides more features and functions that allow you to create more productive-oriented projects.  

                                           Source: Vue CLI

Save the manually selected features so that you can reuse them in the future. We have included presets and plugins in our separate blog. 

The vue create command has a lot of options and you can easily explore them by running the following command. 

vue create --help

Usage: create [options] <app-name> create a new project powered by vue-cli-service Options:   -p, --preset <presetName>       Skip prompts and use saved or remote preset   -d, --default                   Skip prompts and use default preset   -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset   -m, --packageManager <command>  Use specified npm client when installing dependencies   -r, --registry <url>            Use specified npm registry when installing dependencies   -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message   -n, --no-git                    Skip git initialization   -f, --force                     Overwrite target directory if it exists   --merge                         Merge target directory if it exists   -c, --clone                     Use git clone when fetching remote preset   -x, --proxy                     Use specified proxy when creating project   -b, --bare                      Scaffold project without beginner instructions   --skipGetStarted                Skip displaying "Get started" instructions   -h, --help                      Output usage information

Step 2: Use the GUI

You can create and maintain Vuejs projects with the help of a graphical interface with the vue ui command:

vue ui

This command will allow you to open a browser window wih GUI that help you with the project creation process. 

                                                Source: Vue CLI

Step 3: Pulling 2.x Templates (Legacy)

The command Vue CLI >= 3 uses the same vue binary, and that’s how it overwrites Vue CLI 2 (vue-cli). In case you still want a legacy vue init functionality, install global bridge:

npm install -g @vue/cli-init # vue init now works exactly the same as vue-cli@2.x vue init webpack my-project

This Vuejs example will help you create an interactive application. Our CLI Service integration will help you create an app with CLI.