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