{"id":15904,"library":"vue-currency-filter","title":"Vue Currency Filter","description":"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.","status":"abandoned","version":"5.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/mazipan/vue-currency-filter","tags":["javascript","vue 2 currency","vue currency","vue currency filter","vue filter","typescript"],"install":[{"cmd":"npm install vue-currency-filter","lang":"bash","label":"npm"},{"cmd":"yarn add vue-currency-filter","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-currency-filter","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is a default import for global registration via `Vue.use()`.","wrong":"import { VueCurrencyFilter } from 'vue-currency-filter'","symbol":"VueCurrencyFilter","correct":"import VueCurrencyFilter from 'vue-currency-filter'"},{"note":"The library is designed for Vue 2 applications, typically with an ESM import for Vue itself.","wrong":"const Vue = require('vue')","symbol":"Vue","correct":"import Vue from 'vue'"},{"note":"Type import for configuration options when using TypeScript.","symbol":"Config","correct":"import type { Config } from 'vue-currency-filter'"}],"quickstart":{"code":"import Vue from 'vue'\nimport VueCurrencyFilter from 'vue-currency-filter'\n\n// Global registration with custom options\nVue.use(VueCurrencyFilter, {\n  symbol: '€',\n  thousandsSeparator: '.', // Use dot for thousands\n  fractionCount: 2,\n  fractionSeparator: ',', // Use comma for decimals\n  symbolPosition: 'front',\n  symbolSpacing: true,\n  avoidEmptyDecimals: '',\n  useFractionalInput: false\n})\n\nnew Vue({\n  el: '#app',\n  data: {\n    amount: 12345.678,\n    price: 99.5\n  },\n  template: `\n    <div id=\"app\">\n      <p>Amount: {{ amount | currency }}</p>\n      <p>Price: {{ price | currency(\"USD\") }}</p>\n      <p>Custom: {{ 123 | currency(\"£\", 0) }}</p>\n    </div>\n  `\n})","lang":"javascript","description":"Demonstrates global registration of the currency filter with custom options and its usage in a Vue 2 template."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=5.2.0"},{"fix":"For Vue 3, implement currency formatting using computed properties, methods, or a dedicated Vue 3-compatible component library.","message":"This library is strictly compatible with Vue 2. Vue 3 completely removed the concept of filters, rendering this library unusable in Vue 3 applications.","severity":"breaking","affected_versions":">=2.x"},{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Ensure correct TypeScript type imports are used if migrating a JavaScript project, or if encountering type-related issues. Verify compatibility of existing configurations.","message":"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.","severity":"breaking","affected_versions":">=4.0.2"},{"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.","message":"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.","severity":"gotcha","affected_versions":"<5.1.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use `vue-currency-filter` in a Vue 3 application, or the filter was not correctly registered in a Vue 2 application.","error":"[Vue warn]: Failed to resolve filter: currency"},{"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; } }`","cause":"TypeScript error when `vue-currency-filter` is globally registered but the global `Vue` type is not augmented to include the filter.","error":"Property 'currency' does not exist on type 'Vue'."},{"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.","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).","error":"TypeError: Cannot read properties of undefined (reading 'call')"}],"ecosystem":"npm"}