Vue Currency Filter

5.2.0 · abandoned · verified Tue Apr 21

Vue Currency Filter is a lightweight library designed for formatting currency values within Vue 2 applications. It provides a flexible filter based on the principles of `accounting.js`, allowing developers to easily display monetary amounts with configurable symbols, separators, and decimal precision. The current stable version is 5.2.0. A key differentiator is its simplicity for Vue 2 projects needing quick currency formatting without complex component structures. However, it is critical to note that the project's GitHub repository was archived in May 2023, indicating that the library is no longer actively maintained. It is strictly for Vue 2, as Vue 3 removed the concept of filters.

Common errors

```
[Vue warn]: Failed to resolve filter: currency
```
cause Attempting to use `vue-currency-filter` in a Vue 3 application, or the filter was not correctly registered in a Vue 2 application.

fix Ensure you are using Vue 2 and that `Vue.use(VueCurrencyFilter, ...)` is called before the Vue instance is created. For Vue 3, filters are deprecated and this library will not work; use computed properties or methods instead.
```
Property 'currency' does not exist on type 'Vue'.
```
cause TypeScript error when `vue-currency-filter` is globally registered but the global `Vue` type is not augmented to include the filter.

fix In your `shims-vue.d.ts` or similar declaration file, add type augmentation for `Vue` to include the `$options.filters` property, for example: `declare module 'vue/types/vue' { interface Vue { currency: (value: number, symbol?: string, fractionCount?: number) => string; } }`
```
TypeError: Cannot read properties of undefined (reading 'call')
```
cause This can occur in Nuxt.js or SSR environments if the filter is used before Vue is properly initialized on the client side, or due to incorrect build configurations for universal applications (pre-5.1.1).

fix Ensure `vue-currency-filter` is installed and configured correctly within your `nuxt.config.js` plugins array (e.g., `plugins: ['~/plugins/vue-currency-filter']`). If using an older version, upgrade to 5.1.1 or later. Ensure the plugin is loaded client-side if it relies on browser-specific globals.

Warnings

breaking The `vue-currency-filter` project's GitHub repository was archived on May 15, 2023, and the library is no longer actively maintained. Users should consider this before adopting the library for new projects or plan for potential future maintenance issues.
Fix: Evaluate alternative, actively maintained Vue 2 currency formatting libraries, or consider migrating to Vue 3 and implementing custom computed properties or methods for currency formatting.
breaking This library is strictly compatible with Vue 2. Vue 3 completely removed the concept of filters, rendering this library unusable in Vue 3 applications.
Fix: For Vue 3, implement currency formatting using computed properties, methods, or a dedicated Vue 3-compatible component library.
breaking Version 5.0.0 involved a project architecture migration to pnpm, which the release notes indicate 'might have breaking some usage'. While no specific API changes were detailed, users upgrading from 4.x should thoroughly test their implementations.
Fix: Review the official GitHub repository's commit history around the 5.0.0 release for specific changes if encountering unexpected behavior. Thoroughly test existing currency filter usages after upgrading.
breaking Version 4.0.2 introduced a full refactor to TypeScript, which 'might have breaking changes' for existing JavaScript users or those relying on previous internal structures.
Fix: Ensure correct TypeScript type imports are used if migrating a JavaScript project, or if encountering type-related issues. Verify compatibility of existing configurations.
gotcha Older versions (pre-5.1.1) had issues with Nuxt.js configurations, particularly when using multiple instances. This was addressed in version 5.1.1.
Fix: Upgrade to `vue-currency-filter` version 5.1.1 or higher to resolve known Nuxt.js compatibility issues. Review Nuxt-specific configuration examples provided by the library or community if issues persist.

Install

npm install vue-currency-filter npm
yarn add vue-currency-filter yarn
pnpm add vue-currency-filter pnpm

Imports

VueCurrencyFilter

wrong:

import { VueCurrencyFilter } from 'vue-currency-filter'

correct:

import VueCurrencyFilter from 'vue-currency-filter'

This is a default import for global registration via `Vue.use()`.

Vue
wrong:
```
const Vue = require('vue')
```
correct:
```
import Vue from 'vue'
```
The library is designed for Vue 2 applications, typically with an ESM import for Vue itself.
Config
```
import type { Config } from 'vue-currency-filter'
```
Type import for configuration options when using TypeScript.

Quickstart

Demonstrates global registration of the currency filter with custom options and its usage in a Vue 2 template.

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

// Global registration with custom options
Vue.use(VueCurrencyFilter, {
  symbol: '€',
  thousandsSeparator: '.', // Use dot for thousands
  fractionCount: 2,
  fractionSeparator: ',', // Use comma for decimals
  symbolPosition: 'front',
  symbolSpacing: true,
  avoidEmptyDecimals: '',
  useFractionalInput: false
})

new Vue({
  el: '#app',
  data: {
    amount: 12345.678,
    price: 99.5
  },
  template: `
    <div id="app">
      <p>Amount: {{ amount | currency }}</p>
      <p>Price: {{ price | currency("USD") }}</p>
      <p>Custom: {{ 123 | currency("£", 0) }}</p>
    </div>
  `
})

view raw JSON →