If you’re using Vue framework, you probably already know what Vue CLI is. It’s a full system for rapid Vue.js development, providing project scaffolding and prototyping.

An important part of the CLI are cli-plugins. They can modify the internal webpack configuration and inject commands to the vue-cli-service. A great example is a @vue/cli-plugin-typescript: when you invoke it, it adds a tsconfig.json to your project and changes App.vue to have types, so you don’t need to do it manually.

Plugins are very useful and there are a lot of them today for different cases?—?GraphQL + Apollo support, Electron builder, adding UI libraries such as Vuetify or ElementUI… But what if you want to have a plugin for some specific library and it doesn’t exist? Well, it was my case ???.. and I decided to build it myself.

In this article we will be building a vue-cli-plugin-rx. It allows us to add a vue-rx library to our project and get RxJS support in our Vue application.

Vue-cli plugin structure

First of all, what is a CLI plugin? It’s just an npm package with a certain structure. Regarding docs, it must have a service plugin as its main export and can have additional features such as a generator and a prompts file.

For now it’s absolutely unclear what is a service plugin or generator, but no worries?—?it will be explained later!

Of course, like any npm package, CLI plugin must have a package.json in its root folder and it would be nice to have a README.md with some description.

So, let’s start with the following structure:

README.md

index.js   # service plugin

package.json

Now let’s have a look at optional part. A generator can inject additional dependencies or fields into package.json and add files to the project. Do we need it? Definitely, we want to add rxjs and vue-rx as our dependencies! More to say, we want to create some example component if user wants to add it during plugin installation. So, we need to add either generator.js or generator/index.js. I prefer the second way. Now the structure looks like this:

README.md

index.js # service plugin

generator

index.js # generator

package.json

One more thing to add is a prompts file: I wanted my plugin to ask if user wants to have an example component or not. We will need a prompts.jsfile in root folder to have this behavior. So, a structure for now looks the following way:

README.md

index.js   # service plugin

generator

index.js # generator

prompts.js  # prompts file

package.json

Service plugin

A service plugin should export a function which receives two arguments: a PluginAPI instance and an object containing project local options. It can extend/modify the internal webpack config for different environments and inject additional commands to vue-cli-service. Let’s think about it for a minute: do we want to change webpack config somehow or create an additional npm task? The answer is NO, we want just to add some dependencies and example component if necessary. So all we need to change in index.js is:

module.exports = (api, opts) => {}

If your plugin requires changing webpack config, please read this section in official Vue CLI docs.

Uploading files with ReactJS and NodeJS

Adding dependencies via generator

As mentioned above, CLI plugin generator helps us to add dependencies and to change project files. So, first step we need is to make our plugin adding two dependencies: rxjs and vue-rx:

module.exports = (api, options, rootOptions) => {
  api.extendPackage({
    dependencies: {
      'rxjs': '^6.3.3',
      'vue-rx': '^6.0.1',
    },
  });
}

A generator should export a function which receives three arguments: a GeneratorAPI instance, generator options and?—?if user creates a project using certain preset?—?the entire preset will be passed as a third argument.

api.extendPackage method extends the package.json of the project. Nested fields are deep-merged unless you pass { merge: false } as a parameter. In our case we’re adding two dependencies to dependenciessection.

#vuejs #vue #vue cli #programming