All Projects → ignoreintuition → v-currency

ignoreintuition / v-currency

Licence: MIT License
A plugin for formatting currency for different countries in Vue

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects

Projects that are alternatives of or similar to v-currency

addons-konos
Konos Chilean Addons
Stars: ✭ 16 (-33.33%)
Mutual labels:  currency, accounting
Vue Numeric
Input field component to display a formatted currency value based on Vue.js
Stars: ✭ 341 (+1320.83%)
Mutual labels:  currency, vue2
historical-bank-ruby
A Ruby Bank that serves historical exchange rates
Stars: ✭ 14 (-41.67%)
Mutual labels:  currency
awesome-beancount
Awesome Beancount Resources
Stars: ✭ 114 (+375%)
Mutual labels:  accounting
node-ebics-client
Node.js EBICS Client - compliant with ISO 20022
Stars: ✭ 46 (+91.67%)
Mutual labels:  accounting
vue-timeline
a timeline for vue2 and bootstrap3
Stars: ✭ 59 (+145.83%)
Mutual labels:  vue2
python-forex-quotes
Library to fetch and parse realtime Forex quotes and convert currencies
Stars: ✭ 25 (+4.17%)
Mutual labels:  currency
vue-tiny-lazyload-img
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API
Stars: ✭ 91 (+279.17%)
Mutual labels:  vue2
blog-frontend
前后端分离实践----基于Vue2.js框架博客前端
Stars: ✭ 32 (+33.33%)
Mutual labels:  vue2
bpit-vue
vue effects component package 🚀
Stars: ✭ 16 (-33.33%)
Mutual labels:  vue2
huobi-PC
火币桌面客户端,基于electorn-vue开发
Stars: ✭ 56 (+133.33%)
Mutual labels:  vue2
react-numeric
A react component for formatted number form fields
Stars: ✭ 30 (+25%)
Mutual labels:  currency
v-clappr
👏🏻Vue.js wrapper for Clappr media player
Stars: ✭ 18 (-25%)
Mutual labels:  vue2
Code-VueWapDemo
“Vue教程--Wap端项目搭建从0到1”的源码
Stars: ✭ 19 (-20.83%)
Mutual labels:  vue2
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (+8.33%)
Mutual labels:  vue2
vue
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables
Stars: ✭ 55 (+129.17%)
Mutual labels:  vue2
vue-crumbs
a simple and useful breadcrumb for Vue2.js
Stars: ✭ 16 (-33.33%)
Mutual labels:  vue2
vue-snippets
Visual Studio Code Syntax Highlighting For Vue3 And Vue2
Stars: ✭ 25 (+4.17%)
Mutual labels:  vue2
company-admin
Filling annual returns (through ACRA) and tax (through IRAS) for Singapore based small company
Stars: ✭ 23 (-4.17%)
Mutual labels:  accounting
money
Crystal shard for dealing with money and currency conversion
Stars: ✭ 26 (+8.33%)
Mutual labels:  currency

v-currency

A plugin for formatting currency in Vue.js

Usage

 Vue.use(Currency, {
  "type": "USD",
  "thousandSeparator": true,
 });

In order to use it in your components:

export default {
  name: 'Sample',
  data () {
    return {
      moneys: [
        100500.945, 15043.5, 9909, 210, 44.30, -24, 'tq1'
      ]
    }
  },
  methods: {
    getMoneys(i) {
      return this.$helpers.currency(this.moneys[i]);
    },
  },

To change currency on the fly

onChange(e){
  this.$helpers.changeCurrency(e.target.value);
  this.$forceUpdate();
}

Supported formats

  • USD (US)
  • CAD (Canada)
  • EUR (Europe)
  • GBP (Great Britain)
  • JPY (Japan)
  • DEU (Germany)
  • BRA (Brazil)
  • FRA (France)
  • ITA (Italy)
  • CHE (Switzerland)
  • BGR (Bulgaria)

If the format is not explicitly defined in the ruleset will default to JavaScripts toLocaleString. To create a custom format you can add rules to the components.

"YOUR_CUSTOM_CURRENCY": {
  "symbol": "$_", // preceding underscore places numbers before symbol.  succeeding underscore places numbers after symbol
  "thousandSeperator": 0, // (0: comma || 1: decimal || 2: space || 3: apostrophe)
  "decimalSeperator": 0, // (0: decimal || 1: comma || 2: space)
  "negativePattern": 2 // (0: symbol before || 1: symbol after || 2: Parenthesis)
},

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].