---

title: BaseResultPreviousPrice

---

# BaseResultPreviousPrice

Component that renders the @empathyco/x-types#Result previous price.

## Props

| Name                  | Description                                                                                                                  | Type                                                               | Default                 |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------- |
| <code>result</code>   | (Required) The @empathyco/x-types#Result information.                                                                        | <code>Result</code>                                                | <code></code>           |
| <code>currency</code> | Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.                           | <code>string</code>                                                | <code></code>           |
| <code>format</code>   | The currency format possibilities from Intl.NumberFormatOptions.<br />Allows customization of decimal places, grouping, etc. | <code>Omit<Intl.NumberFormatOptions, 'currency' \| 'style'></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 previous price formatted if it has discount. The component has optional
`currency` and `format` props to customize the display.

```vue
<template>
  <BaseResultPreviousPrice :result="result" currency="USD" />
</template>

<script setup>
import { BaseResultPreviousPrice } from "@empathyco/x-components";

const result = {
  price: { originalValue: 199.99, hasDiscount: true },
  // ...other result properties
};
</script>
```

### Customizing format

You can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:

```vue
<template>
  <BaseResultPreviousPrice
    :result="result"
    currency="EUR"
    :format="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
  />
</template>

<script setup>
import { BaseResultPreviousPrice } from "@empathyco/x-components";

const result = {
  price: { originalValue: 199.99, hasDiscount: true },
  // ...other result properties
};
</script>
```

### Overriding default slot

```vue
<template>
  <BaseResultPreviousPrice :result="result">
    <span class="custom-base-result-previous-price">{{
      result.price.originalValue
    }}</span>
  </BaseResultPreviousPrice>
</template>

<script setup>
import { BaseResultPreviousPrice } from "@empathyco/x-components";

const result = {
  price: { originalValue: 199.99, hasDiscount: true },
  // ...other result properties
};
</script>
```