Format Mata Uang pada VueJS Menggunakan Vue Currency Filter

Posted on by

Pada catatan kali ini ialah Bagaimana cara mengubah jumlah atau angka menjadi nilai mata uang pada VueJS menggunakan Vue Currency Filter,  katakanlah kita memiliki angka seperti 10000, dan itu mewakili harga sesuatu dan ingin mengubahnya menjadi Rp. 10.000

Jika angkanya lebih dari 5 digit, namun harus ditampilkan berbeda, misalnya 100000 harus ditampilkan sebagai Rp. 100.000 Ini dalam Rupiah, dan negara yang berbeda memiliki konvensi yang berbeda untuk menampilkan nilainya.

Pertama Install Vue Currency Filter pada VueJS

1
npm install vue-currency-filter

Kemudian import kedalam file main.js

1
import VueCurrencyFilter from 'vue-currency-filter'

Dan gunakan plugin

1
Vue.use(VueCurrencyFilter)

Konfigurasi global seperti berikut

1
2
3
4
5
6
7
8
9
Vue.use(VueCurrencyFilter,
  {
    symbol : 'Rp.',
    thousandsSeparator: '.',
    fractionCount: 0,
    fractionSeparator: ',',
    symbolPosition: 'front',
    symbolSpacing: true
  })

untuk menampilkan yaitu

1
<span>{{ 50000 | currency}}</span>

File main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routes from './router'
import { store } from './store'
import VueCurrencyFilter from 'vue-currency-filter'
 
Vue.config.productionTip = false
 
Vue.use(VueRouter)
Vue.use(VueCurrencyFilter,
  {
    symbol : 'Rp.',
    thousandsSeparator: '.',
    fractionCount: 0,
    fractionSeparator: ',',
    symbolPosition: 'front',
    symbolSpacing: true
  })
 
const router = new VueRouter({
  routes
})
 
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

File Welcome.vue untuk menampilkan

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
<div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
    <div v-for="product in products" :key="product.id" class="col-md-4">
      <div class="card mb-4 shadow-sm">
        <img class="card-img-top" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">{{product.name}}</h5>
          <p class="card-text">{{product.price | currency}}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
              <button type="button" class="btn btn-sm btn-outline-secondary">Buy</button>
            </div>
            <small class="text-muted">Stock: {{product.stock}}</small>
          </div>
        </div>
      </div>
    </div>
</div>
</div>
</template>
 
<script>
export default {
    name: 'Welcome',
    created () {
        this.$store.dispatch('products')
    },
    computed: {
        products () {
            return this.$store.getters.products
        }
    }
}
</script>