Npm Badge
About 718 wordsAbout 2 min
2025-10-08
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
To use this component, you need to manually import the NpmBadge
or NpmBadgeGroup
components:
<!-- Import in markdown -->
<script setup>
import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
</script>
<!-- After importing, you can 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
nameOptionalstring
npm package name. If empty, it will be obtained from repo
repostring
Package GitHub repository address in owner/repo
format. Required when name
is empty
typeNpmBadgeType
Badge type
themeOptionalNpmBadgeTheme
'flat'
Badge theme
labelOptionalstring
Badge label
colorOptionalstring
'#32A9C3'
Badge color
labelColorOptionalstring
'#1B3C4A'
Badge label color
branchOptionalstring
'main'
Repository branch
dirOptionalstring
Package directory in repository. Suitable for monorepo projects
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
nameOptionalstring
npm package name. If empty, it will be obtained from repo
repostring
Package GitHub repository address in owner/repo
format. Required when name
is empty
itemsOptionalstring | NpmBadgeType[]
[]
List of badge types. When passing a string
, separate with ','
and it will be automatically converted to NpmBadgeType[]
themeOptionalNpmBadgeTheme
Badge theme
colorOptionalstring
Badge color
labelColorOptionalstring
Badge label color
branchOptionalstring
Repository branch
dirOptionalstring
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: