Currency directive separators (European and Indian).

Vue.js version

1.0.23

Reproduction Link

<div id="currencies">
    <br />{{currencies[0] | currency}}
    <br />{{currencies[1] | currency}}
    <br />{{currencies[2] | currency}}
    <br />{{currencies[0] | currency '&#8377;' 0}}
    <br />{{currencies[1] | currency '&#8377;' 0}}
    <br />{{currencies[2] | currency '&#8377;' 0}}
    <br />{{currencies[0] | currency '&#8364;'}}
    <br />{{currencies[1] | currency '&#8364;'}}
    <br />{{currencies[2] | currency '&#8364;'}}
    <br />{{currencies[0] | currency '&#8364;'}}
    <br />{{currencies[1] | currency '&#8364;'}}
    <br />{{currencies[2] | currency '&#8364;'}}
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#currencies',
    data: { currencies: [10, 1000, 10000000] }
});
</script>

Steps to reproduce

What is Expected?

Indian numbering (as well as several other Asian countries) don’t use the same number separations as western countries. They place the first comma after three digits, and the rest every two digits, so large numbers like currencies become:

₹1,00,000

Instead of:

₹100,000

Further, many (but not all) European countries have a “decimal comma” and use a dot to separate thousands groups, so the equivalent large amount would become:

€100.000,00

I’m aware (from reading previous discussions on the | currency directive) that inferring settings from the currency marker is not desired, but there should be a way to specify the following outputs:

$10.00
$1,000.00
$10,000,000.00
₹10
₹1,000
₹1,00,00,000
€10.00
€1,000.00
€10,000,000.00
€10,00
€1.000,00
€10.000.000,00

Note the two different euro variants.

What is actually happening?

Currently, all the outputs are:

$10.00
$1,000.00
$10,000,000.00
₹10
₹1,000
₹10,000,000
€10.00
€1,000.00
€10,000,000.00
€10.00
€1,000.00
€10,000,000.00

[rpkilby]

@Y-Less Vue 2.0 is shipping w/o builtin filters. The best path forward is to create your own filter that uses a well-supported currency library to create the display value

[LinusBorg]

As @Y-Less mentioned, filters are removed in Vue 2.0, and we won’t add any new functionality to current filters, so this feature request won’t be fullfilled.

There are numerous libraries out there for formatting numbers to currency strings - Vue should not duplicate that behaviour again.

It’s pretty easy to create your own filter wrapper around one of those libraries, though with a custom filter