vue-composable

# 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>

← fetch →