Currency directive separators (European and Indian).

[Y-Less]

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

[Y-Less]

While I'm on the subject, there are some countries (for example Russia) where the currency symbol follows the money instead of preceedes it.

[Y-Less]

Third issue - a negative number used as the precision gives some strange results:

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

Gives:

₤0
₤1000
₤10000000

Two of them are missing the separators, but one of them is wrong (10 -> 0).

[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

[posva]

IMO it's better to create a filter and ship that as a full package to be used with Vue 1 or 2
If fixing Vue 1 built in filter isn't hard, and you're working on it, you should submit a pr when you're done 😄
(Releasing it as a package is still a good idea)

[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