Npm Badge
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
npm package name. If empty, it will be obtained from repo
Package GitHub repository address in owner/repo format. Required when name is empty
Badge type
'flat'
Badge theme
Badge label
'#32A9C3'
Badge color
'#1B3C4A'
Badge label color
'main'
Repository branch
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
npm package name. If empty, it will be obtained from repo
Package GitHub repository address in owner/repo format. Required when name is empty
[]
List of badge types. When passing a string, separate with ',' and it will be automatically converted to NpmBadgeType[]
Badge theme
Badge color
Badge label color
Repository branch
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:
