# Intl.NumberFormat

The Intl.NumberFormat (opens new window).

# Parameters

import { useIntlNumberFormat } from "vue-composable"; useIntlNumberFormat(locales?,options?);

Parameters	Type	Required	Default	Description
locales	`Ref<string \| string[]>`	`false`	`undefined`	Default locale passed to Intl.NumberFormat (opens new window)
options	`Ref<Intl.NumberFormatOptions>`	`false`	`undefined`	Default options passed to Intl.NumberFormat (opens new window)

# State

The useIntlNumberFormat function exposes the following reactive state:

import { useIntlNumberFormat } from "vue-composable"; const { formatter } = useIntlNumberFormat();

State	Type	Description
formatter	`Ref<Intl.NumberFormat>`	Current formatter used

# Methods

The useIntlNumberFormat function exposes the following methods:

import { useIntlNumberFormat } from "vue-composable"; const { format, formatString } = useIntlNumberFormat();

Signature	Description
`format`	returns reactive `ref<string>`, if value is `ref<number>` it will update automatically
`formatString`	returns `formatted` string

# Example

value
Locale
options.style
options.currency
options.currencyDisplay

value: $400.00

formatted: $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="style">options.style</label> <select name="style" v-model="options.style"> <option value="decimal">decimal</option> <option value="percent">percent</option> <option value="currency">currency</option> </select> </li> <template v-if="options.style === 'currency'"> <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> </template> </ul> <p> value: <b>{{ formatString(value) }}</b> </p> <p> formatted: <b>{{ formattedValue }}</b> </p> </div> </template> <script> import { defineComponent, ref } from "@vue/composition-api"; import { useIntlNumberFormat, useLanguage } from "vue-composable"; export default defineComponent({ name: "intl-number-format-example", setup() { const { languages, language } = useLanguage(); const locales = languages.value.concat(...["pt-PT", "pt-BR"]); const selectedLocale = ref(language.value || "en"); const options = ref({ style: "currency", currency: "USD", currencyDisplay: "symbol" }); const { formatString, format } = useIntlNumberFormat( selectedLocale, options ); const value = ref(400); const formattedValue = format(value); return { locales, selectedLocale, formatString, options, value, formattedValue }; } }); </script>

← dateTimeFormat currencyFormat →