# CurrencyFormat
Format currency using useIntlNumberFormat;
# Parameters
import { useCurrencyFormat } from "vue-composable";
useCurrencyFormat();
useCurrencyFormat(currency, locale?, options?);
useCurrencyFormat(options, locale?);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
currency | Ref<string>|string | false | undefined | Default currency |
locale | Ref<string | string[]> | false | undefined | Default locale passed to Intl.NumberFormat (opens new window) |
options | false | undefined | Default locale passed to Intl.NumberFormat (opens new window) |
# Methods
The useCurrencyFormat
function exposes the following methods:
import { useCurrencyFormat } from "vue-composable";
const { format, formatString } = useCurrencyFormat();
Signature | Description |
---|---|
format | returns reactive ref<string> , if value is ref<number> it will update automatically |
formatString | returns formatted string |
# Example
value: $400.00
formatted: $400.00
Override currency €400.00
# Code
<template>
<div>
<ul>
<li>
<label for="value">value</label>
<input name="value" v-model.number="value" type="number" />
</li>
<li>
<label for="locale">Locale</label>
<select name="locale" v-model="selectedLocale">
<option v-for="l in locales" :value="l">{{ l }}</option>
</select>
</li>
<li>
<label for="currency">options.currency</label>
<input name="currency" v-model="options.currency" />
</li>
<li>
<label for="currencyDisplay">options.currencyDisplay</label>
<select name="currencyDisplay" v-model="options.currencyDisplay">
<option value="symbol">symbol</option>
<option value="code">code</option>
</select>
</li>
</ul>
<p>
value:
<b>{{ formatString(value) }}</b>
</p>
<p>
formatted:
<b>{{ formattedValue }}</b>
</p>
<p>
Override currency
<b>{{ formatString(value, "EUR") }}</b>
</p>
</div>
</template>
<script>
import { defineComponent, ref } from "@vue/composition-api";
import { useCurrencyFormat, useLanguage } from "vue-composable";
export default defineComponent({
name: "currency-format-example",
setup() {
const { languages, language } = useLanguage();
const locales = languages.value.concat(...["pt-PT", "pt-BR"]);
const selectedLocale = ref(language.value);
const options = ref({
currency: "USD",
currencyDisplay: "symbol"
});
const { formatString, format } = useCurrencyFormat(options, selectedLocale);
const value = ref(400);
const formattedValue = format(value);
return {
locales,
selectedLocale,
formatString,
options,
value,
formattedValue
};
}
});
</script>
← numberFormat fetch →