Filter Angka Desimal Vue 3 dengan Numeral JS

Beberapa bulan lalu pada 18 Sep 2020 jagat dunia per-JS-an diramaikan oleh Vue yang telah merilis versi 3 dengan fitur utama Composition API yang dikhususkan untuk state management, lifecycle komponen dan beberapa perubahan lainya, termasuk dihapusnya Vue filter yang sebelumnya ada pada versi 2

Photo by Jakub Kapusnak on Unsplash

Pada tulisan ini sedikit membahas cara membuat filter menggunakan globalProperties di Vue 3 dengan tambahan library NumeralJS.

Penggunaan filter ini biasanya dipakai untuk merubah isi dari sebuah data atau variable yang kemudian diolah untuk menghasilkan apa yang kita inginkan, seperti merubah angka menjadi format mata uang atau terbilang.

Mari kita lihat contoh filter menggunakan globalProperties

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}
app.mount("#app")

Penggunaan filter pada template Vue
{{ $filters.currencyUSD(accountBalance) }}

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

Mari kita tambahkan NumeralJS pada project vue dengan mengetik perintah
npm install numeral

Selanjutnya pada main.js tambahkan import dan app.global.globalProperties
kira kira seperti ini

import { createApp } from "vue"; 
import App from "./App.vue"; 
import numeral from "numeral"; 
 
const app = createApp(App); 
app.config.globalProperties.saring = {
     numeral(value) {
      return numeral(value);
     } 
}; 
app.mount("#app");

Lalu pada template vue kita dapat menggunakan filter seperti ini,
contoh angka 10000
{{ $filters.numeral(10000).format("0.0") }}

dokumentasi lengkap numeral bisa cek http://numeraljs.com/

Tidak telalu rumit untuk membuat filter manual di vue, kita bisa sesuaikan fungsinya dengan kebutuhan kita sendiri. Ada satu package library yang bisa kita gunakan untuk merubah angka menjadi terbilang karya dari om Naufal Rabbani silahkan bisa cek di https://github.com/BosNaufal/terbilang-js

Demikian sedikit tulisan tentang penggunaan filter di Vue 3. Semoga artikel pertama ini dapat memberikan manfaat. Jika ada pertanyaan, saran, dan masukan, silahkan tulis di kolom komentar dibawah yak ges😄

Referensi : https://v3.vuejs.org/guide/migration/filters.html

Terimakasih telah mampir pada artikel ini. Apabila kalian menyukainya klik 👏 dan share serta follow medium ini untuk mendapat info tentang tulisan terbaru selanjutnya.

Qhoirul Anwar, Salam 👋👋👋