Product
ProductPrice
Display a product price with optional original price and discount percentage.
ProductPrice
Renders a formatted product price. When the product has a discount, it shows the current price, strikethrough original price, and discount percentage badge.
Preview
With Discount
$199.99$249.99-20%50% Off
$49.99$99.99-50%Regular
$79.00Usage
<CProductPrice :price="product.price" />
With Discount
<!-- Automatically shows original + discount badge when price has originalAmount -->
<CProductPrice :price="discountedPrice" />
Size Variants
<CProductPrice :price="product.price" size="xs" />
<CProductPrice :price="product.price" size="lg" />
<CProductPrice :price="product.price" size="xl" />
Hide Discount Badge
<CProductPrice :price="product.price" :show-discount="false" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
price | DiscountablePrice | Price | required | Price data from @commercejs/types |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size variant |
showDiscount | boolean | true | Show discount percentage badge |
ui | Partial<{...}> | — | Per-instance theme overrides |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
current | { price, formatted } | Custom current price rendering |
original | { original } | Custom original price rendering |
discount | { percent } | Custom discount badge |
Example: Custom Discount Badge
<CProductPrice :price="product.price">
<template #discount="{ percent }">
<UBadge color="error" size="xs">Save {{ percent }}%</UBadge>
</template>
</CProductPrice>
Theme
Override under ui.productPrice in app.config.ts:
export default defineAppConfig({
ui: {
productPrice: {
slots: {
root: 'inline-flex items-center gap-1.5 flex-wrap',
current: 'font-semibold text-highlighted',
original: 'text-sm line-through text-muted',
discount: 'text-xs font-bold text-error',
},
},
},
})