The devDependency webpack was updated from 4.36.0 to 4.36.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hey,

It looks like the type file was removed out of the build when you migrated across to pnpm

In this line, it would be nice if it didn't default to Rp, but empty string instead.

let symbol = options.symbol || 'Rp'

It seems like the switch to webpack 4 made it so that this package doesn't work with Server Side Rendering any more, because in the dist file a window object is inserted, which doesn't exist in node applications.

Is there a way to use your script without Node/Babel/Webpack and all these things?
I would like to use it but I just use plain ES5, is there a way to integrate your script with vanilla ES5 methods?

I know that it can be used in component tag, such as

<component>
  <div>{{ a | currency }}</div>
</component>
<script>
export default {
  data() {
    return {
      a: 1000
    }
  }
}
</script>

if I want use it in script, what can I do, for example, it is a wrong example to show what I mean

<component>
  <div>{{ b }}</div>
</component>
<script>
export default {
  data() {
    return {
      b: 1000
    }
  },
  mounted() {
    this.b = this.currency(this.b) // how to change it to a currency value, i write for test
  }
}
</script>

This issue made us can not use unpkg again.

It seems like missing integer formatting.

I am not able to do a very simple conversion.

200 -> $2.00

I have some places in my app where fractionCount is 0, and some where it is 2. However, you can only define settings globally, which basically means I need to do something like this in half of my app:

{{ money | currency({ fractionCount: 2 }) }}

It would be really nice if the app supported multiple configurations with different filter names. In the meanwhile, I've done this:

Vue.filter('currency_no_fraction', function (value) {
  return Vue.options.filters.currency(value, {fractionCount: 0})
})

in main.js

import VueCurrencyFilter from 'vue-currency-filter'

Vue.use(VueCurrencyFilter, 
  {
    symbol: 'R$',
    thousandsSeparator: '.',
    fractionCount: 2,
    fractionSeparator: ',',
    symbolPosition: 'front',
    symbolSpacing: true
  },
  {
    name: 'valor',
    symbol: '',
    thousandsSeparator: '',
    fractionCount: 2,
    fractionSeparator: ',',
    symbolPosition: 'front',
    symbolSpacing: false
  }
)

in views

              <v-row wrap class="mx-0">
                <v-text-field
                  class="mx-2"
                  :value="cli_financeiro.mensalidade | currency"
                  @input="value => (cli_financeiro.mensalidade = value)"
                  label="Mensalidade"
                ></v-text-field>
                <v-text-field
                  class="mx-2"
                  :value="cli_financeiro.desconto | valor"
                  @input="value => (cli_financeiro.desconto = value)"
                  label="Desconto"
                ></v-text-field>
              </v-row>

give me an error

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve filter: valor

and if I put the [ ] in

Vue.use(VueCurrencyFilter, [
  {
    symbol: 'R$',
    thousandsSeparator: '.',
    fractionCount: 2,
    fractionSeparator: ',',
    symbolPosition: 'front',
    symbolSpacing: true
  },
  {
    name: 'valor',
    symbol: 'R$',
    thousandsSeparator: '.',
    fractionCount: 2,
    fractionSeparator: ',',
    symbolPosition: 'front',
    symbolSpacing: true
  }
])

I give no errors at all but both filters stop works

Related with #19
We will place this new logo in readme and demo page.
Also will revamp the demo page to be more fancy and have same theme color with the logo.

I would like to use non-breaking spaces (  in HTML) to format a price (for example 1 337,00 €).

I can inject it using thousandsSeparator.

However, it is not possible for the space before the symbol.
Could you add a parameter called symbolSeparator to make it possible ?

When someone displays a currency number, usually, the space should be a   so that the number is not breaked in the middle and unreadable. How would you implement such a feature, through a special option value or just convert the spaces passed in the option to  

Hi,

would it be possible to show decimals only when needed? For example I want to display 1234,45$ but not 1234,00$. This one should be 1234$. I'd like to strip insignificant zeros.

Thanks.

Since accounting.js seems not well maintain by it's creator.
Can we hosted our own formatMoney function ?
Maybe we can learn from accounting.js do it.

Hi,

Rounding values with 3 decimals is not working properly.
When I have a value e.g. 9.075. It round's to 9.07 and not 7.08.

Example:

method : {

getTotals () {

        let totalColletion = this.totalDetails.map((total) => {
            return **total.totaldoc;**
        })

}

}

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

For example -20 formatted as $-20, but on my opinion it should be -$20

When we trying to edit separator text, unfortunately browser become not responding.
Need to analyze

https://bundlephobia.com/[email protected]

Recently upgraded from version 3.2.3 to 3.4.3 and the currency filter is not applying the thousands symbol anymore. I verified on the frontend works great but for some reason will not apply the thousands when ran from node.

failing test

test('renders renders with proper VueCurrencyFilter formatting', async t => {
  const template = '<div>${{pay | currency({ fractionCount: 0 })}}</div>'
  const vars = {
    pay: '5000'
  }

  const html = await renderTemplate(template, vars)

  t.is('<div>$5,000</div>', html)
})

render method

const Vue = require('vue')
const VueCurrencyFilter = require('vue-currency-filter')
const { createRenderer } = require('vue-server-renderer')
const moment = require('moment')

const renderer = createRenderer()
const { specialCharacters } = require('./utils')

Vue.use(VueCurrencyFilter, {
  symbol: '$',
  thousandsSeparator: ',',
  fractionCount: 2,
  fractionSeparator: '.',
  symbolPosition: 'front',
  symbolSpacing: false
})

module.exports = async function (template, data) {
  const sanitized_template = template.replace(specialCharacters, '')
  const app = new Vue({
    template: sanitized_template,
    data,
    filters: {
      date (val) {
        return moment(val).format('M/D/YYYY')
      }
    }
  })

  const html = await renderer.renderToString(app)

  return html.replace(' data-server-rendered="true"', '')
}

The current build is not compatible with SSR as the Window object is referenced.

For example, when using it with Nuxt this would trigger an error.

I'll provide a pull request.

i need multiple configs, but currently we can use this plugin in one way

Vue.use(VueCurrencyFilter,
{
symbol : '$',
thousandsSeparator: ',',
fractionCount: 0,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false
})
Vue.use(VueCurrencyFilter,
{
name: 'abtestt', // like this
symbol : '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false
})
{{ v1 | currency}} // 1st filter works
{{ v1 | abtestt}} // now 2nd one

The full error shows up as:

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot pa
rse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your
files, ignoring "node_modules".

    Here's what you can do:
      To have some of your "node_modules" files transformed, you can specify a c
ustom "transformIgnorePatterns" in your config.
      If you need a custom transformation specify a "transform" option in your c
onfig.
      If you simply want to mock your non-JS modules (e.g. binary assets) you ca
n stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    D:\ywc\src\node_modules\@babel\runtime\helpers\esm\typeof.js:3
    export default function _typeof(obj) {
    ^^^^^^

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/@vue/cli-plugin-unit-jest/node_modules/jest-runtime/build/script_transformer.js:403:17)
      at node_modules/vue-currency-filter/dist/VueCurrencyFilter.bundle.js:2:91
      at Object.<anonymous> (node_modules/vue-currency-filter/dist/VueCurrencyFilter.bundle.js:5:2)

Rolling back to 3.2.0 makes this error go away.

The devDependency webpack-serve was updated from 3.1.1 to 3.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack-serve is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

All files are pointing to the min file, this is not correct and it is breaking.
When should it be:

// main -> umd
// module -> cjs(commonjs)

"main": "dist/VueCurrencyFilter.js",
"module": "dist/VueCurrencyFilter.cjs.js"

5bc7eab

Try to adopt tsdx as a development tools

Vue.use(VueCurrencyFilter, {
    symbol: 'Eur',
    thousandsSeparator: '',
    fractionCount: 2,
    fractionSeparator: '.',
    symbolPosition: 'end',
    symbolSpacing: true
});

Result is 1empty000.00 Eur instead of wanted 1000.00 Eur

I'm having a small problem using your filter with French Canadian. French Canadian uses thousand separator of space, but your filter is setting it to the default because it thinks an empty space is a number.

After upgrading webpack into v4, this repo failed to run script npm run dev which used for development environment.

I am using VueI18n with three languages, and i cannot change the global props of the CurrencyFilter plugin, when i change a language.

I don't want to put all the config inline for every time i use it, but instead i want to do something like.
this.$currencyFilter= {} in my method for changing language.

Is this possible?

This is my code
main.js

import VueCurrencyFilter from 'vue-currency-filter'

Vue.use(VueCurrencyFilter,
    {
        symbol : '€',
        thousandsSeparator: '.',
        fractionCount: 2,
        fractionSeparator: ',',
        symbolPosition: 'front',
        symbolSpacing: true
    });

I would need to override symbol, thousandsSeparator and fractionSeparator

Please take a look Vue2-Simplert demo page.

Vue.use(VueCurrencyFilter,
{
symbol : '$',
thousandsSeparator: '.',
fractionCount: 0,
fractionSeparator: ',',
symbolPosition: 'front',
symbolSpacing: false
}
)

tapi di tampilan filternya masih belum jalan.

Hi, I want to have a different font-size on the symbol and floating digits.
I am assuming to get this

<span>$</span><span>999</span><span>.88</span>

Is this possible?

Hello!
Can you explain me what this line of code is doing:
if(!thousandsSeparator || !isNaN(thousandsSeparator)) thousandsSeparator = '.'

I want to set thousands separator to space (or empty string), but this condition does not allow to do this

how to use this tool to build simple to.Fixed(10) ?

Maybe we need to add contribution guide for help people to contribute.

This is possible by using the filters but will be nice to have helper to use directly in the scripts:

<script>
methods: {
 format () {
    // its possible by doing this
    return this.$options.filters.currency(99999)
    // But will be nice to do this
    return this.$currency(99999)
}
</script>

BTW I can do it and made the PR, but do you like the idea?

Hallo @mazipan , Saya Iqbal dari Medan. Boleh nggak saya kontribusi ngebuatin logo untuk vue currency filter buatan @mazipan ?

I tried to use this as plugin in Nuxt.
I have created currency.js under plugins/ folder.

// plugins/currency.js

import VueCurrencyFilter from 'vue-currency-filter'
import Vue from 'vue'

Vue.use(VueCurrencyFilter)

and include the script in nuxt.config.js

// nuxt.config.js

module.exports = {
    plugins: [
        { src: '~/plugins/currency.js', ssr: false }
    ]
}

and inside my component at components/ProductCard.vue

// components/ProductCard.vue
<template>
    <h4>{{ price | currency }}</h4>
</template>
<script>
    import currency from '~/plugins/currency.js'

    export default {
        ...
    }
</script>

This resulted error as below

[Vue warn]: Failed to resolve filter: currency

(found in <ProductCard> at components/ProductCard.vue)

Any workaround how to use this on Nuxt?

I get this error while using TypeScript in Vue.

Could not find a declaration file for module 'vue-currency-filter'. '/node_modules/vue-currency-filter/dist/vue-currency-filter.js' implicitly has an 'any' type.
Try npm install @types/vue-currency-filter if it exists or add a new declaration (.d.ts) file containing declare module 'vue-currency-filter';

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Hi,
The filter is very useful for us, but we get a problem when we need add configuration in specific place.
We just want to change one or two configs but not affect others , for your example and source code, we need pass all parameters one by one, like {{ money | currency(undefined, undefined, 2)}}.
It's so ugly and verbose, so maybe we can just pass a config which will be merged to default config, like {{ money | currency({ fractionCount: 2 }}} I guess it will be more flexible

{{balance | currency("", ",", 6, ".") }}
...
{{amount | currency}}

Now amount is formatted in the same way as balance, but it shouldn't be

How may I get current state config your plugin?

Currently in the module it shows 49,00 but it would be nice if there was an option so it could show 49,- since this is the way its shown in euro's

I don't want to sound pushy, but any chance you can publish a new release? Thanks!