Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

UI plug-in information


May 07, 2021 Vue CLI


Table of contents


When your plug-in is used in its UI, you can display different additional information to make it easier to discover and identify.

Logo

You can place a logo on the root of the directory that will be published to npm.png. It will be displayed in the following places:

  • Search for plug-ins to install
  • In the list of installed plug-ins

UI plug-in information

This logo should be an opaque square (preferably 84x84).

Discoverability

To increase the visibility of your plug-in when searching, place the keywords that describe the plug-in in the description field of the plug-in's package.json file.

Example:

{
  "name": "vue-cli-plugin-apollo",
  "version": "0.7.7",
  "description": "vue cli plugin to add Apollo and GraphQL"
}

You should add the URL or repository of the plug-in site to the homepage or repository field so that the More Info button appears in your plug-in description.

{
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Akryum/vue-cli-plugin-apollo.git"
  },
  "homepage": "https://github.com/Akryum/vue-cli-plugin-apollo#readme"
}

UI plug-in information