diff --git a/docs/dev-guide/plugin-dev.md b/docs/dev-guide/plugin-dev.md index b6ac880eca..7197ae559d 100644 --- a/docs/dev-guide/plugin-dev.md +++ b/docs/dev-guide/plugin-dev.md @@ -34,6 +34,44 @@ So, typical CLI plugin folder structure looks like the following: └── ui.js # Vue UI integration (optional) ``` +## Naming and discoverability + +For a CLI plugin to be usable in a Vue CLI project, it must follow the name convention `vue-cli-plugin-` or `@scope/vue-cli-plugin-`. It allows your plugin to be: + +- Discoverable by `@vue/cli-service`; +- Discoverable by other developers via searching; +- Installable via `vue add ` or `vue invoke `. + +:::warning Warning +Make sure to name the plugin correctly, otherwise it will be impossible to install it via `vue add` command or find it with Vue UI plugins search! +::: + +For better discoverability when a user searches for your plugin, put keywords describing your plugin in the `description` field of the plugin `package.json` file. + +Example: + +```json +{ + "name": "vue-cli-plugin-apollo", + "version": "0.7.7", + "description": "vue-cli plugin to add Apollo and GraphQL" +} +``` + +You should add the url to the plugin website or repository in the `homepage` or `repository` field so that a 'More info' button will be displayed in your plugin description: + +```json +{ + "repository": { + "type": "git", + "url": "git+https://github.com/Akryum/vue-cli-plugin-apollo.git" + }, + "homepage": "https://github.com/Akryum/vue-cli-plugin-apollo#readme" +} +``` + +![Plugin search item](/plugin-search-item.png) + ## Generator A Generator part of the CLI plugin is usually needed when you want to extend your package with new dependencies, create new files in your project or edit existing ones. @@ -766,41 +804,6 @@ You can put a `logo.png` file in the root directory of the folder that will be p The logo should be a square non-transparent image (ideally 84x84). -### Discoverability - -For a CLI plugin to be usable by other developers, it must be published on npm following the name convention `vue-cli-plugin-` or `@scope/vue-cli-plugin-`. Following the name convention allows your plugin to be: - -- Discoverable by `@vue/cli-service`; -- Discoverable by other developers via searching; -- Installable via `vue add ` or `vue invoke `. - -For better discoverability when a user searches for your plugin, put keywords describing your plugin in the `description` field of the plugin `package.json` file. - -Example: - -```json -{ - "name": "vue-cli-plugin-apollo", - "version": "0.7.7", - "description": "vue-cli plugin to add Apollo and GraphQL" -} -``` - -You should add the url to the plugin website or repository in the `homepage` or `repository` field so that a 'More info' button will be displayed in your plugin description: - -```json -{ - "repository": { - "type": "git", - "url": "git+https://github.com/Akryum/vue-cli-plugin-apollo.git" - }, - "homepage": "https://github.com/Akryum/vue-cli-plugin-apollo#readme" -} -``` - -![Plugin search item](/plugin-search-item.png) - - ## Publish Plugin to npm To publish your plugin, you need to be registered an [npmjs.com](npmjs.com) and you should have `npm` installed globally. If it's your first npm module, please run