Developing a Vue CLI Plugin for a Unified Component Library

Vue is one of the mainstream front‑end frameworks, and Vue CLI (now at version 4.x) provides built‑in tooling such as bundling and compression, simplifying webpack configuration. This article explains how to develop a custom Vue CLI plugin to enforce naming conventions and directory structures for a team‑wide UI component library.

1. Naming Convention

Official plugins must follow the vue-cli-plugin- pattern. In this tutorial the plugin is named vue-cli-plugin-next-component . Official Vue plugins use the @vue/cli-plugin- namespace to differentiate themselves.

mkdir vue-cli-plugin-next-component && cd $_

2. Directory Structure

The plugin should contain the following files and folders:

. ├── README.md ├── generator │ └── template │ └── index.js # generator ├── prompts.js # optional prompt file ├── index.js # service plugin entry └── package.json

Service Plugin

The main entry ( index.js ) exports a function receiving api and options . It can modify the webpack configuration and register custom commands.

module.exports = (api, options) => { api.chainWebpack(webpackConfig => { // modify webpack config via webpack-chain }); api.configureWebpack(webpackConfig => { // modify or return merged config }); api.registerCommand('test', args => { // register `vue-cli-service test` command }); };

Prompt

The prompt file defines questions shown during plugin initialization, using the Inquirer library. Example:

module.exports = [ { name: 'componentName', type: 'input', message: '请输入要创建的组件名称(kebab-case):', validate: function(str) { return /^[a-z][a-z|-]*[a-z]$/.test(str); } }, { name: 'componentCnName', type: 'input', message: '请输入要创建的组件中文名称(中文):', validate: function(str) { return /[^\x00-\xff]$/.test(str); } }, // ...more questions ];

Generator

The generator receives api , options , and rootOptions . It renders templates using EJS, injecting the collected options.

module.exports = (api, options, rootOptions) => { api.render('./template', { ...options }); };

Template Example

A simple component template might look like:

<template> <div>I am a <%=camelName %> component. Rewrite me from here.</div> </template> <script> export default { name: 'nx-<%=componentName %>' }; </script>

3. Testing and Verification

After implementing the plugin, run npm init in a test directory, install the plugin, and invoke it with vue invoke . The generated files will appear under a packages folder, e.g., a button component directory, confirming that the plugin enforces the desired naming and structure.

4. Summary

Creating a Vue CLI plugin allows teams to standardize component creation, avoid repetitive copy‑paste, and extend the Vue CLI with custom, reusable functionality. The plugin bridges gaps in the default scaffolding, making the Vue ecosystem more modular and maintainable.