Overview

The Npm Badge component is used to display npm package information and provide relevant links.

The badges are powered by https://shields.io.

Usage

The component does not need to be registered; the theme will automatically import the NpmBadge and NpmBadgeGroup components on demand.

Use them directly in markdown files:

<!-- use them in markdown -->
<NpmBadge name="vuepress-theme-plume" type="dm" />

<!-- Display multiple npm badges side by side -->
<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />

<NpmBadge />

Single npm badge

Props

Name:name

Optional

Type:string

npm package name. If empty, it will be obtained from repo

Name:repo

Optional

Type:string

Package GitHub repository address in owner/repo format. Required when name is empty

Name:type

Required

Type:NpmBadgeType

Badge type

Name:theme

Optional

Type:NpmBadgeTheme

Default:'flat'` (`stars` / `forks` types use `'social'`)

Badge theme

Name:label

Optional

Type:string

Default:Auto-generated by type (`version` uses the package name, download types use `downloads`)

Badge label

Name:color

Optional

Type:string

Default:'#32A9C3'

Badge color

Name:labelColor

Optional

Type:string

Default:'#1B3C4A'

Badge label color

Name:branch

Optional

Type:string

Default:'main'

Repository branch. It is only used to build links when dir is also set; setting it alone has no effect.

Name:dir

Optional

Type:string

Default:''

Package directory in repository. Suitable for monorepo projects. When set, links of GitHub badges such as source point to /{repo}/tree/{branch}/{dir}

Types

type NpmBadgeType
  // github
  = | 'source' // github source
    | 'stars' // github stars
    | 'forks' // github forks
    | 'license' // github license
  // npm
    | 'version' // npm version
    | 'dt' // alias d18m
    | 'd18m' // npm downloads last 18 months
    | 'dw' // npm downloads weekly
    | 'dm' // npm downloads monthly
    | 'dy' // npm downloads yearly

type NpmBadgeTheme = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'social'

Examples

• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="source" /> -
• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="stars" /> -
• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" /> -
• <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" /> -
• <NpmBadge name="vuepress-theme-plume" type="version" /> -
• <NpmBadge name="vuepress-theme-plume" type="dt" /> -
• <NpmBadge name="vuepress-theme-plume" type="d18m" /> -
• <NpmBadge name="vuepress-theme-plume" type="dy" /> -
• <NpmBadge name="vuepress-theme-plume" type="dm" /> -
• <NpmBadge name="vuepress-theme-plume" type="dw" /> -

<NpmBadgeGroup />

Combines multiple npm badges

Props

Name:name

Optional

Type:string

Default:''

npm package name. If empty, it will be obtained from repo

Name:repo

Optional

Type:string

Package GitHub repository address in owner/repo format. Required when name is empty

Name:items

Optional

Type:string | NpmBadgeType | NpmBadgeType[]

Default:[]

List of badge types. When passing a string, separate with ',' and it will be automatically converted to NpmBadgeType[]

Name:theme

Optional

Type:NpmBadgeTheme

Default:'flat'` (`stars` / `forks` types use `'social'`)

Badge theme

Name:color

Optional

Type:string

Default:'#32A9C3'

Badge color

Name:labelColor

Optional

Type:string

Default:'#1B3C4A'

Badge label color

Name:branch

Optional

Type:string

Default:'main'

Repository branch

Name:dir

Optional

Type:string

Package directory in repository. Suitable for monorepo projects

Slots

<NpmBadgeGroup /> supports passing multiple <NpmBadge /> components.

The Props declared in <NpmBadgeGroup /> will be injected into the <NpmBadge /> components. This approach is used to implement and simplify badge combinations.

Examples

Input:

<NpmBadgeGroup
  repo="pengzhanbo/vuepress-theme-plume"
  items="stars,version,dm,source"
/>

Output:

Use <slot /> to flexibly define badge combinations:

Input:

<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
  <NpmBadge type="stars" />
  <NpmBadge type="version" label="npm" />
  <NpmBadge type="dm" />
  <NpmBadge type="source" />
</NpmBadgeGroup>

Output:

Contributors

pengzhanbo

Changelog

10/13/26, 3:56 PM

View All Changelog

• e4dae-docs: improve docs (#1071)on 10/13/26
• 7a454-feat(plugin-md-power): drop optional tag in field container (#987)on 9/12/26
• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• 16c2d-docs: update field containeron 6/8/26
• 38505-docs: update en docs (#708)on 10/9/25
• 4d236-feat(theme)!: add collections support (#704)on 10/7/25
• 4f60b-style: lint fixon 6/24/25
• d1496-docs: update docson 4/30/25
• 0fd6c-refactor(theme): improve types and flat config (#524)on 3/15/25
• e3b1c-docs: improve docson 8/18/24

Edit this page

Previous pageRepo Card

Next pageSwiper