---

title: BaseResultCurrentPrice

---

# BaseResultCurrentPrice

Component that renders the @empathyco/x-types#Result current price
that may or may not be on sale.

## Props

| Name                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Type                | Default       |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------- |
| <code>result</code> | (Required) The @empathyco/x-types#Result information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | <code>Result</code> | <code></code> |
| <code>format</code> | Format or mask to be defined as string.<br />- Use 'i' to define integer numbers.<br />- Use 'd' to define decimal numbers. You can define the length of the decimal part. If the<br />doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.<br />- Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.<br />- Decimal separator must be defined between the last 'i' and the first 'd'. It can be more<br />than one character.<br />- Set whatever you need around the integers and decimals marks.<br />- Default mask: 'i.iii,dd' which returns '1.345,67'. | <code>string</code> | <code></code> |

## Slots

| Name                 | Description        | Bindings<br />(name - type - description)    |
| -------------------- | ------------------ | -------------------------------------------- |
| <code>default</code> | Base currency item | **result** <code>result</code> - Result data |

## Examples

### Basic example

This component shows the current price formatted. You can provide the `format` by property or let
the `BaseCurrency` component use an injected one.

```vue
<template>
  <BaseResultCurrentPrice :result="result" :format="'i.iii,ddd €'" />
</template>

<script setup>
import { BaseResultCurrentPrice } from "@empathyco/x-components";
const result = {
  price: { value: 123.45, hasDiscount: false },
  // ...other result properties
};
</script>
```

### Overriding default slot

```vue
<template>
  <BaseResultCurrentPrice :result="result">
    <span class="custom-base-result-current-price">{{
      result.price.value
    }}</span>
  </BaseResultCurrentPrice>
</template>

<script setup>
import { BaseResultCurrentPrice } from "@empathyco/x-components";
const result = {
  price: { value: 123.45, hasDiscount: false },
  // ...other result properties
};
</script>
```