{"id":13719394,"url":"https://github.com/mazipan/vue-currency-filter","last_synced_at":"2026-01-10T03:49:58.013Z","repository":{"id":47704133,"uuid":"98882640","full_name":"mazipan/vue-currency-filter","owner":"mazipan","description":"🍒 Lightweight vue currency filter based on accounting.js","archived":true,"fork":false,"pushed_at":"2021-08-20T22:27:04.000Z","size":12987,"stargazers_count":245,"open_issues_count":9,"forks_count":29,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-13T09:04:31.360Z","etag":null,"topics":["vue","vue-currency","vue-currency-filter","vue-filter-currency","vue-filters","vue2"],"latest_commit_sha":null,"homepage":"https://mazipan.github.io/vue-currency-filter/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mazipan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"mazipan","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://mazipan.space/support"]}},"created_at":"2017-07-31T11:41:50.000Z","updated_at":"2025-02-28T03:02:33.000Z","dependencies_parsed_at":"2022-08-27T11:22:15.188Z","dependency_job_id":null,"html_url":"https://github.com/mazipan/vue-currency-filter","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazipan%2Fvue-currency-filter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazipan%2Fvue-currency-filter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazipan%2Fvue-currency-filter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mazipan%2Fvue-currency-filter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mazipan","download_url":"https://codeload.github.com/mazipan/vue-currency-filter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252868851,"owners_count":21816925,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-currency","vue-currency-filter","vue-filter-currency","vue-filters","vue2"],"created_at":"2024-08-03T01:00:47.872Z","updated_at":"2026-01-10T03:49:57.924Z","avatar_url":"https://github.com/mazipan.png","language":"TypeScript","funding_links":["https://ko-fi.com/mazipan","https://mazipan.space/support","https://www.buymeacoffee.com/mazipan?utm_source=github","https://www.paypal.me/mazipan?utm_source=github"],"categories":["UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)","Open Source Project"],"sub_categories":["过滤器","UI Utilities","Filters","Utility"],"readme":"# 🍒 Vue Currency Filter\n\n\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://mazipan.github.io/vue-currency-filter/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n\t\t\u003cimg \n\t\t     width=\"128\" src=\"https://raw.githubusercontent.com/mazipan/vue-currency-filter/master/assets/VueJS-Currency-128px.png\" \n\t\t     alt=\"Vue Currency Logo\" /\u003e\n\t\u003c/a\u003e\n\t\u003ch2 align=\"center\"\u003eLightweight vue currency filter based on accounting.js\u003ch2\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-currency-filter\"\u003e\n    \u003cimg height=\"20\" src=\"https://img.shields.io/npm/v/vue-currency-filter.svg\" alt=\"NPM Version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=vue-currency-filter\"\u003e\n    \u003cimg height=\"20\" src=\"https://badgen.net/bundlephobia/minzip/vue-currency-filter\" alt=\"Bundlephobia Size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://packagephobia.com/result?p=vue-currency-filter\"\u003e\n    \u003cimg height=\"20\" src=\"https://packagephobia.com/badge?p=vue-currency-filter\" alt=\"Bundlephobia Size\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-currency-filter\"\u003e\n    \u003cimg height=\"20\" src=\"https://img.shields.io/npm/dt/vue-currency-filter.svg\" alt=\"Download All Time\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/mazipan/vue-currency-filter\"\u003e\n    \u003cimg height=\"20\" src=\"https://img.shields.io/travis/mazipan/vue-currency-filter.svg\" alt=\"Travis Build\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#contributors\"\u003e\n    \u003cimg height=\"20\" src=\"https://img.shields.io/badge/all_contributors-4-orange.svg\" alt=\"All Contributors\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"screenshoot-bundlesize.png\" alt=\"Bundle Size\"\u003e\n\u003c/p\u003e\n\n## Demo\n\n[https://mazipan.github.io/vue-currency-filter/](https://mazipan.github.io/vue-currency-filter/)\n\n## Download\n\n```bash\n# NPM\nnpm install vue-currency-filter\n\n# Yarn\nyarn add vue-currency-filter\n```\n\n## Sample Usage\n\nStep by step to using  `vue-currency-filter`:\n\n### Import in `main.js`\n\n```javascript\nimport VueCurrencyFilter from 'vue-currency-filter'\n```\n\n### Use Plugins\n\n```javascript\nVue.use(VueCurrencyFilter)\n```\n\n### Add Global Configuration\n\n```javascript\nVue.use(VueCurrencyFilter,\n{\n  symbol : '$',\n  thousandsSeparator: '.',\n  fractionCount: 2,\n  fractionSeparator: ',',\n  symbolPosition: 'front',\n  symbolSpacing: true,\n  avoidEmptyDecimals: undefined,\n})\n```\n\n### Add Multiple Instance\n\n```javascript\nVue.use(VueCurrencyFilter, [\n { // default name 'currency'\n   symbol: '$',\n   thousandsSeparator: ',',\n   fractionCount: 2,\n   fractionSeparator: '.',\n   symbolPosition: 'front',\n   symbolSpacing: true,\n   avoidEmptyDecimals: '',\n },\n { // default name 'currency_2'\n   name: 'currency_2',\n   symbol: 'usd',\n   thousandsSeparator: ' ',\n   fractionCount: 2,\n   fractionSeparator: '.',\n   symbolPosition: 'front',\n   symbolSpacing: false,\n   avoidEmptyDecimals: '--',\n }\n])\n```\n\n### Use in View\n\n```html\n\u003cspan\u003e{{ 20000 | currency}}\u003c/span\u003e\n```\n\n### Usage in Nuxt.js\n\nAdd `vue-currency-filter/nuxt` to modules section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    'vue-currency-filter/nuxt',\n\n    // Or if you have custom options...\n    ['vue-currency-filter/nuxt', {\n      symbol: '$',\n      thousandsSeparator: ',',\n      fractionCount: 2,\n      fractionSeparator: '.',\n      symbolPosition: 'front',\n      symbolSpacing: true,\n      avoidEmptyDecimals: undefined,\n    }],\n\n    // for multiple instance\n    ['vue-currency-filter/nuxt', [\n      { // default name 'currency'\n        symbol: '$',\n        thousandsSeparator: ',',\n        fractionCount: 2,\n        fractionSeparator: '.',\n        symbolPosition: 'front',\n        symbolSpacing: true,\n        avoidEmptyDecimals: '##',\n      },\n      { // default name 'currency_2'\n        name: 'currency_2',\n        symbol: 'usd',\n        thousandsSeparator: ' ',\n        fractionCount: 2,\n        fractionSeparator: '.',\n        symbolPosition: 'front',\n        symbolSpacing: false,\n        avoidEmptyDecimals: '',\n      }\n    ]],\n  ]\n}\n```\nor using external options\n```js\n{\n  modules: [\n    'vue-currency-filter/nuxt'\n  ]\n  currencyFilter: [\n    { // default name 'currency'\n      symbol: '$',\n      thousandsSeparator: ',',\n      fractionCount: 2,\n      fractionSeparator: '.',\n      symbolPosition: 'front',\n      symbolSpacing: true,\n      avoidEmptyDecimals: '',\n    },\n    { // default name 'currency_2'\n      name: 'currency_2',\n      symbol: 'usd',\n      thousandsSeparator: ' ',\n      fractionCount: 2,\n      fractionSeparator: '.',\n      symbolPosition: 'front',\n      symbolSpacing: false,\n      avoidEmptyDecimals: '##',\n    }\n  ]\n  // or for one filter\n  currencyFilter: { // default name 'currency'\n    symbol: '$',\n    thousandsSeparator: ',',\n    fractionCount: 2,\n    fractionSeparator: '.',\n    symbolPosition: 'front',\n    symbolSpacing: true,\n    avoidEmptyDecimals: undefined,\n  }\n}\n```\n\n### Usage in Nuxt-typescript\nyou must add declaration for vue and nuxt context if you want autocomplete in methods\ncreate file `vue-currency-filters.ts` in directory with your types\n```ts\nimport { CurrencyFilterMethodInstance } from \"vue-currency-filter/src/types\";\n\ndeclare module 'vue/types/vue' {\n  interface Vue {\n    $currency: CurrencyFilterMethodInstance,\n    $currency_2: CurrencyFilterMethodInstance\n  }\n}\n\ndeclare module '@nuxt/types' {\n  interface NuxtAppOptions {\n    $currency: CurrencyFilterMethodInstance,\n    $currency_2: CurrencyFilterMethodInstance\n  }\n}\n```\n\n### Usage without NPM\n\nAdd script dependencies\n\n```html\n\u003c!-- Vue Dependency --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/vue-currency-filter\"\u003e\u003c/script\u003e\n```\n\nUse filters in global\n\n```js\nif (VueCurrencyFilter) {\n  Vue.use(VueCurrencyFilter, {\n    symbol: \"£\",\n    thousandsSeparator: \",\",\n    fractionCount: 0,\n    fractionSeparator: \".\",\n    symbolPosition: \"front\",\n    symbolSpacing: false,\n    avoidEmptyDecimals: '',\n  })\n}\n\nvar app = new Vue({\n  el: '#app',\n  data: {\n    curr: 1000\n  }\n});\n\n```\n\nSee [https://codepen.io/mazipan/pen/YdmNMy](https://codepen.io/mazipan/pen/YdmNMy) for code sample.\n\n### Add Configuration In Specific Place\n\n```html\n\u003cspan\u003e\n{{ textInput | currency(configSymbol, configSeparator, configFractionCount,\nconfigFractionSeparator, configSymbolPosition, configSymbolSpacing)}}\n\u003c/span\u003e\n```\n\n**Now configurations is also available as Object**, thanks to [sunhengzhe](https://github.com/sunhengzhe) in [PR #25](https://github.com/mazipan/vue-currency-filter/pull/25/commits/052a741644556f4d1140e7b7e1ba96a8e2c0d015):\n\n```html\n\u003cspan\u003e\n{{ textInput | currency({\n  symbol: '',\n  thousandsSeparator: '',\n  fractionCount: '',\n  fractionSeparator: '',\n  symbolPosition: '',\n  symbolSpacing: '',\n  avoidEmptyDecimals: undefined,\n})}}\n\u003c/span\u003e\n```\n\n## Available Options\n\n```javascript\n{\n  name: 'string (default: currency)', // using for multiple instance filters\n  symbol: 'string (default : empty string)',\n  thousandsSeparator: 'string (default : .)',\n  fractionCount: 'number (default : 0)',\n  fractionSeparator: 'string (default: \",\")',\n  symbolPosition: 'string (default: front)',\n  symbolSpacing: 'boolean (default: true)',\n  avoidEmptyDecimals: 'string (default: undefined)',\n}\n```\n\n## How to test in Unit Test\n\nUsing `@vue/test-utils` we can create test for any Vue Plugins, like:\n\n```js\n/* eslint-env jest */\nimport { shallowMount, createLocalVue } from \"@vue/test-utils\";\nimport VueCurrencyFilter from \"vue-currency-filter\";\n\nimport Component from \"../pages/myComponent.vue\";\n\ndescribe(\"test myComponent\", () =\u003e {\n  it(\"vue-currency-filter should working correctly\", () =\u003e {\n    const localVue = createLocalVue();\n    \n    localVue.use(VueCurrencyFilter, {\n      symbol: \"$\",\n      thousandsSeparator: \",\",\n      fractionCount: 2,\n      fractionSeparator: \".\",\n      symbolPosition: \"front\",\n      symbolSpacing: true,\n      avoidEmptyDecimals: undefined,\n    });\n\n    let wrapper = shallowMount(Component, {\n      localVue\n    });\n\n    const result = wrapper.find(\".curr\");\n    expect(result.text()).toEqual(\"$ 1,000.00\");\n    \n    localVue.use(VueCurrencyFilter, {\n      symbol: \"$\",\n      thousandsSeparator: \",\",\n      fractionCount: 2,\n      fractionSeparator: \".\",\n      symbolPosition: \"front\",\n      symbolSpacing: true,\n      avoidEmptyDecimals: '',\n    });\n\n    wrapper = shallowMount(Component, {\n      localVue\n    });\n\n    const result = wrapper.find(\".curr\");\n    expect(result.text()).toEqual(\"$ 1,000\");\n    \n    localVue.use(VueCurrencyFilter, {\n      symbol: \"$\",\n      thousandsSeparator: \",\",\n      fractionCount: 2,\n      fractionSeparator: \".\",\n      symbolPosition: \"front\",\n      symbolSpacing: true,\n      avoidEmptyDecimals: '##',\n    });\n\n    wrapper = shallowMount(Component, {\n      localVue\n    });\n\n    const result = wrapper.find(\".curr\");\n    expect(result.text()).toEqual(\"$ 1,000.##\");\n  });\n});\n```\n\nSee sample test here: [https://codesandbox.io/s/6xk1mv694n](https://codesandbox.io/s/6xk1mv694n)\n\n## Contributing\n\nIf you'd like to contribute, head to the [contributing guidelines](/CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development.\n\n## Credits\n\n- [Vue](https://vuejs.org) for amazing framework\n- [Jetbrain](https://www.jetbrains.com/?from=vue-currency-filter) for amazing support with free license for WebStorm IDE\n- [@iqbalhood](https://github.com/iqbalhood) as logo creator (see [#19](https://github.com/mazipan/vue-currency-filter/issues/19))\n\n[\u003cimg src=\"https://raw.githubusercontent.com/mazipan/vue-currency-filter/master/jetbrains.png\" width=\"100px;\"  /\u003e](https://www.jetbrains.com/?from=vue-currency-filter)\n\n## Support me\n\n- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)\n- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)\n- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)\n- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)\n\n## Hope this will be useful for you all\n\nCopyright © 2017 Built with ❤️ by Irfan Maulana\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.mazipan.xyz/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/7221389?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIrfan Maulana\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=mazipan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://about.me/iqbalhood\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1563756?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eiqbalhood\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-iqbalhood\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://sunhengzhe.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/8614151?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e孙恒哲\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=sunhengzhe\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ricardogobbosouza\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/13064722?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRicardo Gobbo de Souza\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=ricardogobbosouza\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/dsfx3d\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/14162837?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYashodhan Singh Rathore\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=dsfx3d\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://gijsroge.github.io\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/2242498?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGijs Rogé\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=gijsroge\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/SysaIvan\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/42174601?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIvan Sysa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=SysaIvan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://niccord.github.io\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/2854279?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNicola Cordioli\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mazipan/vue-currency-filter/commits?author=niccord\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazipan%2Fvue-currency-filter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmazipan%2Fvue-currency-filter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmazipan%2Fvue-currency-filter/lists"}