Version Badge

Displays the package version with git commit hash. Includes both a high-level component with boolean flags and a low-level component for custom values.

High-Level Component (UIKitBadge)

Uses boolean flags to control which parts of the badge are displayed. All flags default to false - pass them as true to enable each element.

vuer-uikitv0.0.117

2a52049

vuer-uikitv0.0.117

vuer-uikit0.0.117

vuer-uikit

// Full badge with all elements
<UIKitBadge package version prefix hash linkable />

// Package, version with prefix, clickable (no hash)
<UIKitBadge package version prefix linkable />

// Package, version without prefix, with hash
<UIKitBadge package version hash />

// Version with prefix only
<UIKitBadge version prefix />

// Package and hash only (no version)
<UIKitBadge package hash />

// Version only (no prefix)
<UIKitBadge version />

Props

Prop	Type	Default	Description
`package`	`boolean`	`false`	Show package name
`version`	`boolean`	`false`	Show version number
`prefix`	`boolean`	`false`	Add "v" prefix to version
`hash`	`boolean`	`false`	Show git commit hash
`linkable`	`boolean`	`false`	Make badge clickable (links to npm/github)
`className`	`string`	-	Additional CSS classes

Low-Level Component (PackageBadge)

Takes explicit values for full customization.

customv1.2.3

abc123

mylib2.0.0

v3.0.0-beta.1

def456

// Custom package with all values
<PackageBadge
  packageName="custom"
  versionText="v1.2.3"
  gitHash="abc123"
  packageFullName="@org/custom-package"
/>

// Non-linkable custom badge
<PackageBadge
  packageName="mylib"
  versionText="2.0.0"
  linkable={false}
/>

// Version and hash only
<PackageBadge
  versionText="v3.0.0-beta.1"
  gitHash="def456"
/>

Props

Prop	Type	Default	Description
`packageName`	`string`	-	Package name to display
`packageFullName`	`string`	-	Full npm package name for link
`versionText`	`string`	-	Version string to display
`gitHash`	`string`	-	Git commit hash to display
`linkable`	`boolean`	`true`	Make badge clickable
`className`	`string`	-	Additional CSS classes

Programmatic Access

import { PACKAGE_VERSION, GIT_HASH } from '@vuer-ai/vuer-uikit';

console.log(`Version: ${PACKAGE_VERSION}, Commit: ${GIT_HASH}`);