How to build your own vue-cli 3 plugin

Seb.L.
Seb.L.
Apr 22, 2018 · 3 min read

When the first versions of vue-cli came out it was really easy to generate a working VueJS project in seconds. There was multiple templates available, simple webpack, pwa, you could even make your own, but almost all were forked from the webpack template.

So when the webpack template changed you had to maintain and update your own, for maybe 3 or 4 files and 3 lines of javascript that adds up to the original template.

When developing a vue-cli plugin you can focus on what you want to add or update in your generated VueJs project.

How to use vue-cli plugins:

Be sure you have vue-cli 3 installed globally and create a project using :

Then to use a plugin:

It will search for an existing vue-cli-plugin-my-plugin npm package, install it as a dev dependency in your project and invoke it.

Build a plugin

A vue-cli plugin is basically a readme, a package.json and those 3 files:

  • index.js
  • generator.js or generator/index.js (optional)
  • prompts.js (optional)

Service (index.js)

This is where you can configure or extend your project webpack configuration to your needs, ‘projectOptions’ are the options defined in the ‘vue.config.js’ file in your generated project (or in your project package.json under the vue key).

Generator (generator.js or generator/index.js)

This is where you can update the package.json or your main.js file to add another import statement for example, render templates (using ejs) and add files.

The options argument returns the prompts answers.

Prompts (prompts.js)

This is where you can add prompts that will be used by inquireJs when you invoke your plugin, so you can then use the answers in your generator file for configuration purpose.

Invoking your plugin locally

You now have your plugin ready and you want to try it out.

Open a terminal in your freshly created vue project folder and install your plugin as a dev dependency (with “file:”)

Then invoke your plugin each time you want to try it:

When ready just submit your plugin to npm and anyone would be able to use it with “vue add my-plugin” as seen at the beginning of this post.

Resources and existing plugins

Seb.L.

Written by

Seb.L.

Lead Front-end dev at ABBD. Paris, France.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade