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.
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:
- generator.js or generator/index.js (optional)
- prompts.js (optional)
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.
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
- vue-cli documentation on plugins: https://github.com/vuejs/vue-cli/blob/dev/docs/plugin-dev.md
- VueI18n cli plugin: https://github.com/kazupon/vue-cli-plugin-i18n
- Vuetify cli plugin: https://github.com/vuetifyjs/vue-cli-plugin-vuetify
- Element-ui cli plugin: https://github.com/Seb-L/vue-cli-plugin-element-ui