From e2d6e722e3ccc2958356753467080ea17099141f Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 23 Apr 2019 20:04:40 +0300 Subject: [PATCH 1/4] docs: move naming plugin section to the beginning of the guide --- docs/dev-guide/plugin-dev.md | 69 ++++++++++++++++++------------------ 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/docs/dev-guide/plugin-dev.md b/docs/dev-guide/plugin-dev.md index b6ac880eca..c1daadcc2c 100644 --- a/docs/dev-guide/plugin-dev.md +++ b/docs/dev-guide/plugin-dev.md @@ -34,6 +34,40 @@ 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 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) + ## 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 +800,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 From 95425aeccbaf9dba95b5151f073050022a15c214 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Tue, 23 Apr 2019 20:35:21 +0300 Subject: [PATCH 2/4] docs: added a link to npm --- docs/dev-guide/plugin-dev.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dev-guide/plugin-dev.md b/docs/dev-guide/plugin-dev.md index c1daadcc2c..0362b527b2 100644 --- a/docs/dev-guide/plugin-dev.md +++ b/docs/dev-guide/plugin-dev.md @@ -36,7 +36,7 @@ So, typical CLI plugin folder structure looks like the following: ## Naming and 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: +For a CLI plugin to be usable by other developers, it must be published on [npm](https://www.npmjs.com/) 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; From 803dd42097ec99de475c0629a03691466fc465b1 Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Wed, 24 Apr 2019 08:05:02 +0300 Subject: [PATCH 3/4] Update docs/dev-guide/plugin-dev.md Co-Authored-By: NataliaTepluhina --- docs/dev-guide/plugin-dev.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/dev-guide/plugin-dev.md b/docs/dev-guide/plugin-dev.md index 0362b527b2..6eaccfd0c3 100644 --- a/docs/dev-guide/plugin-dev.md +++ b/docs/dev-guide/plugin-dev.md @@ -36,7 +36,7 @@ So, typical CLI plugin folder structure looks like the following: ## Naming and discoverability -For a CLI plugin to be usable by other developers, it must be published on [npm](https://www.npmjs.com/) following the name convention `vue-cli-plugin-` or `@scope/vue-cli-plugin-`. Following the name convention allows your plugin to be: +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; From 8cce09c6aa1cacee911cdd927623db48d6c740e0 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Wed, 24 Apr 2019 09:31:42 +0300 Subject: [PATCH 4/4] docs: add a warning in plugin naming section --- docs/dev-guide/plugin-dev.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/dev-guide/plugin-dev.md b/docs/dev-guide/plugin-dev.md index 6eaccfd0c3..7197ae559d 100644 --- a/docs/dev-guide/plugin-dev.md +++ b/docs/dev-guide/plugin-dev.md @@ -42,6 +42,10 @@ For a CLI plugin to be usable in a Vue CLI project, it must follow the name conv - 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: