diff --git a/CHANGELOG.md b/CHANGELOG.md
index a70ec9a6f..a6102e929 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,19 @@ Please check our [developers guide](https://gitlab.com/tokend/developers-guide)
 for further information about branching and tagging conventions.
 
 ## [Unreleased]
+#### Changed
+- Move formatNumber filter to helper
+- Move formatPercent to formatNumber helper
+- Move formatInteger to formatNumber helper
+- Move cropAddress to text helper and rename to abbrCenter
+- Move formatMoney to helper
+- Move formatDate to helper
+- Move formatDateDMY to helper
+- Move formatDateDMYT to helper
+- Move formatCalendar to helper
+- Move formatCalendarInline to helper
+- Move abbreviate to helper
+
 ### Fixed
 - New version of vue: 2.7.14
 - New version of vue-template-compiler": 2.7.14
diff --git a/src/i18n/index.js b/src/i18n/index.js
index b41265547..b290e8d9a 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -9,14 +9,9 @@ import i18nextBrowserLanguageDetector from 'i18next-browser-languagedetector'
 
 // TODO: make i18n.language and i18n.languages responsive
 
-import moment from 'moment-timezone'
-
 import _isObject from 'lodash/isObject'
-import _get from 'lodash/get'
 import _merge from 'lodash/merge'
 
-import { MathUtil } from '@/js/utils'
-
 class I18n {
   constructor () {
     this._i18nextInstance = i18next.createInstance()
@@ -165,46 +160,7 @@ class I18n {
       nonExplicitWhitelist: false,
       interpolation: {
         format: (param, format) => {
-          const lngConfig = this._i18nextInstance
-            .getResourceBundle(this.language, 'config')
-
           switch (format.toLowerCase()) {
-            case 'date':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.datetime'))
-            case 'dmy':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.dmy'))
-            case 'dmyt':
-              return moment(param)
-                .format(_get(lngConfig, 'date.presets.dmyt'))
-            case 'calendar':
-              return moment(param)
-                .calendar(null, _get(lngConfig, 'date.calendar'))
-            case 'calendar-inline':
-              return moment(param)
-                .calendar(null, _get(lngConfig, 'date.calendarInline'))
-            case 'money':
-              const value = (_isObject(param) ? param.value : param) || '0'
-              const defaultFormat =
-                _get(lngConfig, 'number.formats.amounts.default')
-
-              const result = MathUtil.format(value, defaultFormat)
-              return param.currency
-                ? result.concat(' ', param.currency)
-                : result
-            case 'number':
-              return MathUtil
-                .format(param, _get(lngConfig, 'number.formats.default'))
-            case 'integer':
-              return MathUtil
-                .format(param, _get(lngConfig, 'number.formats.integer'))
-            case 'percent':
-              const convertedPercent = MathUtil.multiply(param, 100)
-              return MathUtil.format(
-                convertedPercent,
-                _get(lngConfig, 'number.formats.percent')
-              )
             default:
               console.warn(`Unknown format: ${format}, skipping…`)
               return param
diff --git a/src/i18n/resources/en.json b/src/i18n/resources/en.json
index d45d2b260..c4a5667da 100644
--- a/src/i18n/resources/en.json
+++ b/src/i18n/resources/en.json
@@ -1113,7 +1113,7 @@
     "assets-list": {
       "update-asset-title": "Update asset",
       "details-title": "Asset details",
-      "list-item-balance-line": "Balance: {{value, money}}",
+      "list-item-balance-line": "Balance:",
       "no-balance-msg": "No balance"
     },
     "requests-page": {
diff --git a/src/vue/filters/abbreviate.js b/src/js/helpers/abbreviate.js
similarity index 100%
rename from src/vue/filters/abbreviate.js
rename to src/js/helpers/abbreviate.js
diff --git a/src/vue/filters/abbreviate.spec.js b/src/js/helpers/abbreviate.spec.js
similarity index 96%
rename from src/vue/filters/abbreviate.spec.js
rename to src/js/helpers/abbreviate.spec.js
index 232155182..defe42c3a 100644
--- a/src/vue/filters/abbreviate.spec.js
+++ b/src/js/helpers/abbreviate.spec.js
@@ -1,6 +1,6 @@
 import { abbreviate } from './abbreviate'
 
-describe('abbreviate filter', () => {
+describe('abbreviate helper', () => {
   describe('transforms the given', () => {
     const testCases = [
       { input: 'account', expectedOutput: 'A' },
diff --git a/src/js/helpers/date-helpers.js b/src/js/helpers/date-helpers.js
index acbc69aaa..726cf2bdb 100644
--- a/src/js/helpers/date-helpers.js
+++ b/src/js/helpers/date-helpers.js
@@ -1,5 +1,39 @@
 import moment from 'moment'
 
+export function formatDate (date) {
+  return moment(date).format('DD.MM.YYYY [at] H:mm')
+}
+
+export function formatDateDMY (date) {
+  return moment(date).format('DD.MM.YYYY')
+}
+
+export function formatDateDMYT (date) {
+  return moment(date).format('DD.MM.YYYY [at] H:mm')
+}
+
+export function formatCalendar (date) {
+  return moment(date).calendar(null, {
+    sameDay: '[Today at] H:mm',
+    lastDay: '[Yesterday at] H:mm',
+    nextDay: '[Tomorrow at] H:mm',
+    lastWeek: '[Last] dddd [at] H:mm',
+    nextWeek: '[Next] dddd [at] H:mm',
+    sameElse: 'MMMM D, YYYY [at] H:mm',
+  })
+}
+
+export function formatCalendarInline (date) {
+  return moment(date).calendar(null, {
+    sameDay: '[today at] H:mm',
+    lastDay: '[yesterday at] H:mm',
+    nextDay: '[tomorrow at] H:mm',
+    lastWeek: '[last] dddd [at] H:mm',
+    nextWeek: '[next] dddd [at] H:mm',
+    sameElse: '[at] MMMM D, YYYY [at] H:mm',
+  })
+}
+
 export function toRFC3339 (date) {
   if (!date) {
     return ''
diff --git a/src/js/helpers/money-helper.js b/src/js/helpers/money-helper.js
new file mode 100644
index 000000000..221fe7884
--- /dev/null
+++ b/src/js/helpers/money-helper.js
@@ -0,0 +1,21 @@
+import { MathUtil } from '@/js/utils'
+
+export function formatMoney ({
+  value,
+  currency,
+}) {
+  const cfg =
+  ({
+    decimalSeparator: '.',
+    groupSeparator: ',',
+    groupSize: 3,
+    decimalPlaces: 6,
+  })
+
+  const result = value
+    ? MathUtil.format(value, cfg)
+    : '0'
+  return currency
+    ? result.concat(' ', currency)
+    : result
+}
diff --git a/src/js/helpers/number-helper.js b/src/js/helpers/number-helper.js
new file mode 100644
index 000000000..9d1ad9670
--- /dev/null
+++ b/src/js/helpers/number-helper.js
@@ -0,0 +1,20 @@
+import { MathUtil } from '@/js/utils'
+
+export function formatNumber (
+  number,
+  decimalPlaces = 6,
+  suffix = 0,
+) {
+  const cfg =
+  ({
+    decimalSeparator: '.',
+    groupSeparator: ',',
+    groupSize: 3,
+    suffix,
+    decimalPlaces,
+  })
+  return MathUtil.format(
+    number,
+    cfg,
+  )
+}
diff --git a/src/vue/filters/cropAddress.js b/src/js/helpers/text-helper.js
similarity index 59%
rename from src/vue/filters/cropAddress.js
rename to src/js/helpers/text-helper.js
index 6e4c158bb..823d02cb4 100644
--- a/src/vue/filters/cropAddress.js
+++ b/src/js/helpers/text-helper.js
@@ -1,3 +1,3 @@
-export function cropAddress (value) {
+export function abbrCenter (value) {
   return `${value.slice(0, 4)}…${value.slice(-4)}`
 }
diff --git a/src/main.js b/src/main.js
index c03325c6b..f4944b5f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,17 +17,6 @@ import { ripple } from '@/vue/directives/ripple'
 import { i18n, i18nComponent } from '@/i18n'
 import { globalize } from '@/vue/filters/globalize'
 import { globalizeCountry } from './vue/filters/globalizeCountry'
-import { formatDate } from '@/vue/filters/formatDate'
-import { formatMoney } from '@/vue/filters/formatMoney'
-import { formatNumber } from '@/vue/filters/formatNumber'
-import { formatInteger } from '@/vue/filters/formatInteger'
-import { formatPercent } from '@/vue/filters/formatPercent'
-import { formatCalendar } from '@/vue/filters/formatCalendar'
-import { formatCalendarInline } from '@/vue/filters/formatCalendarInline'
-import { formatDateDMY } from '@/vue/filters/formatDateDMY'
-import { formatDateDMYT } from '@/vue/filters/formatDateDMYT'
-import { abbreviate } from '@/vue/filters/abbreviate'
-import { cropAddress } from '@/vue/filters/cropAddress'
 import { ErrorTracker } from '@/js/helpers/error-tracker'
 import { vueRoutes } from './vue-router/routes'
 import { useBrowserUpdateBanner } from './browser-update'
@@ -55,17 +44,6 @@ async function init () {
   Vue.directive('ripple', ripple)
   Vue.filter('globalize', globalize)
   Vue.filter('globalizeCountry', globalizeCountry)
-  Vue.filter('formatDate', formatDate)
-  Vue.filter('formatDateDMY', formatDateDMY)
-  Vue.filter('formatDateDMYT', formatDateDMYT)
-  Vue.filter('formatMoney', formatMoney)
-  Vue.filter('formatNumber', formatNumber)
-  Vue.filter('formatPercent', formatPercent)
-  Vue.filter('formatInteger', formatInteger)
-  Vue.filter('formatCalendar', formatCalendar)
-  Vue.filter('formatCalendarInline', formatCalendarInline)
-  Vue.filter('abbreviate', abbreviate)
-  Vue.filter('cropAddress', cropAddress)
   Vue.component('i18n', i18nComponent)
   Vue.prototype.$config = config
   Vue.prototype.$routes = vueRoutes
diff --git a/src/vue/common/CardLogo.vue b/src/vue/common/CardLogo.vue
index 4fd482d69..4fcad6b34 100644
--- a/src/vue/common/CardLogo.vue
+++ b/src/vue/common/CardLogo.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { abbreviate } from '@/vue/filters/abbreviate'
+import { abbreviate } from '@/js/helpers/abbreviate'
 
 export default {
   name: 'card-logo',
diff --git a/src/vue/common/EmailGetter.vue b/src/vue/common/EmailGetter.vue
index 1792011ce..5edc73f12 100644
--- a/src/vue/common/EmailGetter.vue
+++ b/src/vue/common/EmailGetter.vue
@@ -20,7 +20,7 @@
       </template>
 
       <template v-else-if="accountId || balanceId">
-        {{ accountId || balanceId | cropAddress }}
+        {{ accountId || abbrCenter(balanceId) }}
       </template>
 
       <template v-else>
@@ -55,12 +55,14 @@ import IdentityGetterMixin from '@/vue/mixins/identity-getter'
 
 import { api } from '@/api'
 import { ErrorHandler } from '@/js/helpers/error-handler'
+import { defineComponent } from 'vue'
+import { abbrCenter } from '@/js/helpers/text-helper'
 import Clipboard from 'clipboard'
 import Tooltip from '@/vue/common/Tooltip'
 
 import safeGet from 'lodash/get'
 
-export default {
+export default defineComponent({
   components: {
     Tooltip,
   },
@@ -170,7 +172,12 @@ export default {
       }, hideTooltipTimeout)
     },
   },
-}
+  setup () {
+    return {
+      abbrCenter,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/vue/common/TradeTopBar.vue b/src/vue/common/TradeTopBar.vue
index 84f62f550..8609ea640 100644
--- a/src/vue/common/TradeTopBar.vue
+++ b/src/vue/common/TradeTopBar.vue
@@ -82,15 +82,13 @@
           v-if="formattedPairs.length && isLoaded"
           class="trade-asset-selector__balances-value"
         >
-          {{
-            // eslint-disable-next-line
-            { value: assetPairBalances.base, currency: assetPair.base } | formatMoney
-          }}
+          {{ formatMoney({
+            value: assetPairBalances.base, currency: assetPair.base
+          }) }}
           /
-          {{
-            // eslint-disable-next-line
-            { value: assetPairBalances.quote, currency: assetPair.quote } | formatMoney
-          }}
+          {{ formatMoney({
+            value:assetPairBalances.quote, currency: assetPair.quote
+          }) }}
         </p>
         <skeleton-loader
           v-else-if="!isLoaded"
@@ -154,6 +152,8 @@ import { vueRoutes } from '@/vue-router/routes'
 import { ErrorHandler } from '@/js/helpers/error-handler'
 import { Bus } from '@/js/helpers/event-bus'
 
+import { formatMoney } from '@/js/helpers/money-helper'
+
 const EVENTS = {
   reloadTradeData: 'reload-trade-data',
 }
@@ -287,6 +287,11 @@ export default {
       this.loadBalances()
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/common/assets/AssetLogo.vue b/src/vue/common/assets/AssetLogo.vue
index a9417a4ac..40f21f4f9 100644
--- a/src/vue/common/assets/AssetLogo.vue
+++ b/src/vue/common/assets/AssetLogo.vue
@@ -8,17 +8,24 @@
     v-else
     class="asset-logo asset-logo__code-abbr"
   >
-    {{ assetCode | abbreviate }}
+    {{ abbreviate(assetCode) }}
   </p>
 </template>
 
 <script>
+import { abbreviate } from '@/js/helpers/abbreviate'
+
 export default {
   name: 'asset-logo',
   props: {
     logoUrl: { type: String, required: true },
     assetCode: { type: String, required: true },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/common/assets/AssetLogoDark.vue b/src/vue/common/assets/AssetLogoDark.vue
index f607a0165..cca50e63c 100644
--- a/src/vue/common/assets/AssetLogoDark.vue
+++ b/src/vue/common/assets/AssetLogoDark.vue
@@ -8,17 +8,24 @@
     v-else
     class="asset-logo-dark asset-logo-dark__code-abbr"
   >
-    {{ assetCode | abbreviate }}
+    {{ abbreviate(assetCode) }}
   </p>
 </template>
 
 <script>
+import { abbreviate } from '@/js/helpers/abbreviate'
+
 export default {
   name: 'asset-logo-dark',
   props: {
     logoUrl: { type: String, required: true },
     assetCode: { type: String, required: true },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/common/chart/Chart.Renderer.vue b/src/vue/common/chart/Chart.Renderer.vue
index 151651f49..d4fb70604 100644
--- a/src/vue/common/chart/Chart.Renderer.vue
+++ b/src/vue/common/chart/Chart.Renderer.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { formatMoney } from '@/vue/filters/formatMoney'
+import { formatMoney } from '@/js/helpers/money-helper'
 import { mapGetters } from 'vuex'
 import { vuexTypes } from '@/vuex'
 import * as d3Array from 'd3-array'
@@ -167,7 +167,7 @@ export default {
             .domain([0, 12])
           this.yAxisLine = d3.axisRight(y)
             .tickValues([0, 5, 10])
-            .tickFormat((d) => `${formatMoney(d)} ${this.defaultAsset}`)
+            .tickFormat((d) => `${formatMoney({ value: d })} ${this.defaultAsset}`)
             .tickSizeInner(this.width)
             .tickSizeOuter(0)
             .tickPadding(25)
@@ -293,7 +293,7 @@ export default {
       if (this.isTicksShown) {
         const yAxisLine = d3.axisRight(this.y)
           .ticks(4)
-          .tickFormat((d) => `${formatMoney(d.toFixed(2))} ${this.defaultAsset}`)
+          .tickFormat((d) => `${formatMoney({ value: d.toFixed(2) })} ${this.defaultAsset}`)
           .tickSizeInner(this.width)
           .tickSizeOuter(0)
           .tickPadding(25)
diff --git a/src/vue/common/fees/FeeViewer.vue b/src/vue/common/fees/FeeViewer.vue
index 9db486053..7ce13036e 100644
--- a/src/vue/common/fees/FeeViewer.vue
+++ b/src/vue/common/fees/FeeViewer.vue
@@ -9,7 +9,7 @@
         class="fee-viewer__total"
         @click="toggleDetails"
       >
-        {{ formatFee(fee.total) | formatMoney }}
+        {{ formatMoney(formatFee(fee.total)) }}
       </a>
     </p>
 
@@ -24,7 +24,7 @@
           </span>
 
           <span class="fee-viewer__details-row-text">
-            {{ formatFee(fee.fixed) | formatMoney }}
+            {{ formatMoney(formatFee(fee.fixed)) }}
           </span>
         </p>
 
@@ -34,7 +34,7 @@
           </span>
 
           <span class="fee-viewer__details-row-text">
-            {{ formatFee(fee.calculatedPercent) | formatMoney }}
+            {{ formatMoney(formatFee(fee.calculatedPercent)) }}
           </span>
         </p>
 
@@ -47,7 +47,7 @@
           </span>
 
           <span class="fee-viewer__details-row-text">
-            {{ formatFee(fee.additional) | formatMoney }}
+            {{ formatMoney(formatFee(fee.additional)) }}
           </span>
         </p>
       </div>
@@ -57,6 +57,7 @@
 
 <script>
 import { Fee } from './fee'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'fee-viewer',
@@ -108,6 +109,12 @@ export default {
       this.isDetailsShown = !this.isDetailsShown
     },
   },
+
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/filters/formatCalendar.js b/src/vue/filters/formatCalendar.js
deleted file mode 100644
index 07f93759a..000000000
--- a/src/vue/filters/formatCalendar.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatCalendar (value) {
-  return globalize('formats.calendar', { value })
-}
diff --git a/src/vue/filters/formatCalendarInline.js b/src/vue/filters/formatCalendarInline.js
deleted file mode 100644
index 3e772a550..000000000
--- a/src/vue/filters/formatCalendarInline.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatCalendar (value) {
-  return globalize('formats.calendar-inline', { value })
-}
diff --git a/src/vue/filters/formatDate.js b/src/vue/filters/formatDate.js
deleted file mode 100644
index 7c37966c2..000000000
--- a/src/vue/filters/formatDate.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatDate (value) {
-  return globalize('formats.date', { value })
-}
diff --git a/src/vue/filters/formatDateDMY.js b/src/vue/filters/formatDateDMY.js
deleted file mode 100644
index f721eea77..000000000
--- a/src/vue/filters/formatDateDMY.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatDateDMY (value) {
-  return globalize('formats.dmy', { value })
-}
diff --git a/src/vue/filters/formatDateDMYT.js b/src/vue/filters/formatDateDMYT.js
deleted file mode 100644
index 84daf5aea..000000000
--- a/src/vue/filters/formatDateDMYT.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatDateDMYT (value) {
-  return globalize('formats.dmyt', { value })
-}
diff --git a/src/vue/filters/formatInteger.js b/src/vue/filters/formatInteger.js
deleted file mode 100644
index 921411f82..000000000
--- a/src/vue/filters/formatInteger.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatInteger (value) {
-  return globalize('formats.integer', { value })
-}
diff --git a/src/vue/filters/formatMoney.js b/src/vue/filters/formatMoney.js
deleted file mode 100644
index 6b805711b..000000000
--- a/src/vue/filters/formatMoney.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatMoney (value) {
-  return globalize('formats.money', { value })
-}
diff --git a/src/vue/filters/formatNumber.js b/src/vue/filters/formatNumber.js
deleted file mode 100644
index b6302f42e..000000000
--- a/src/vue/filters/formatNumber.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatNumber (value) {
-  return globalize('formats.number', { value })
-}
diff --git a/src/vue/filters/formatPercent.js b/src/vue/filters/formatPercent.js
deleted file mode 100644
index c745a5a63..000000000
--- a/src/vue/filters/formatPercent.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { globalize } from './globalize'
-
-export function formatPercent (value) {
-  return globalize('formats.percent', { value: value / 100 })
-}
diff --git a/src/vue/forms/IssuanceForm.vue b/src/vue/forms/IssuanceForm.vue
index 72726af7e..a5cf33cb5 100644
--- a/src/vue/forms/IssuanceForm.vue
+++ b/src/vue/forms/IssuanceForm.vue
@@ -116,7 +116,7 @@
 
                 <readonly-field
                   :label="'issuance-form.amount-to-receive-msg' | globalize"
-                  :value="receivingAmount | formatMoney"
+                  :value="formatMoney(receivingAmount)"
                   :error-message="getFieldErrorMessage('receivingAmount.value')"
                 />
               </template>
@@ -188,6 +188,7 @@ import {
   maxDecimalDigitsCount,
 } from '@validators'
 import { IssuanceFormer } from '@/js/formers/IssuanceFormer'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const REFERENCE_MAX_LENGTH = 64
 const EVENTS = {
@@ -332,6 +333,11 @@ export default {
       this.hideConfirmation()
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/forms/TradeForms/CreateTradeOfferForm.vue b/src/vue/forms/TradeForms/CreateTradeOfferForm.vue
index 2dcd8f441..e66fa9d30 100644
--- a/src/vue/forms/TradeForms/CreateTradeOfferForm.vue
+++ b/src/vue/forms/TradeForms/CreateTradeOfferForm.vue
@@ -81,10 +81,10 @@
         <template v-if="isFeesLoaded">
           <readonly-field
             :label="'create-trade-offer-form.total-amount-lbl' | globalize"
-            :value="{
+            :value="formatMoney({
               value: quoteAmount,
               currency: assetPair.quote,
-            } | formatMoney"
+            })"
             :error-message="getFieldErrorMessage(
               'quoteAmount',
               {
@@ -168,6 +168,7 @@ import {
   maxValueBig,
   decimal,
 } from '@validators'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   offerCreated: 'offer-created',
@@ -362,6 +363,11 @@ export default {
       this.form.assetCode = _get(accountBalances, 'asset.code', this.accountAssets[0])
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/forms/TradeForms/SubmitTradeOfferForm.vue b/src/vue/forms/TradeForms/SubmitTradeOfferForm.vue
index a82202028..446de6d1b 100644
--- a/src/vue/forms/TradeForms/SubmitTradeOfferForm.vue
+++ b/src/vue/forms/TradeForms/SubmitTradeOfferForm.vue
@@ -77,10 +77,10 @@
                 asset: former.attrs.quoteAssetCode
               })
             "
-            :value="{
+            :value="formatMoney({
               value: quoteAmount,
               currency: former.attrs.quoteAssetCode,
-            } | formatMoney"
+            })"
             :error-message="getFieldErrorMessage(
               'quoteAmount',
               {
@@ -156,6 +156,7 @@ import { mapGetters, mapActions } from 'vuex'
 import { MathUtil } from '@/js/utils/math.util'
 import config from '@/config'
 import { api } from '@/api'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 import {
   required,
@@ -343,6 +344,11 @@ export default {
       this.hideConfirmation()
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/forms/TradeForms/YourTradeOfferForm.vue b/src/vue/forms/TradeForms/YourTradeOfferForm.vue
index 268e33fcc..2fb0fc673 100644
--- a/src/vue/forms/TradeForms/YourTradeOfferForm.vue
+++ b/src/vue/forms/TradeForms/YourTradeOfferForm.vue
@@ -75,10 +75,10 @@
                 asset: former.attrs.quoteAssetCode
               })
             "
-            :value="{
+            :value="formatMoney({
               value: quoteAmount,
               currency: former.attrs.quoteAssetCode,
-            } | formatMoney"
+            })"
             :error-message="getFieldErrorMessage(
               'quoteAmount',
               {
@@ -159,6 +159,7 @@ import { buildOpCancel } from '@/js/helpers/trade-helper'
 import { MathUtil } from '@/js/utils/math.util'
 import config from '@/config'
 import { api } from '@/api'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 import {
   required,
@@ -390,6 +391,11 @@ export default {
       this.showConfirmation()
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/assets/shared/components/asset-attributes-viewer.vue b/src/vue/modules/assets/shared/components/asset-attributes-viewer.vue
index dc56e3cac..9410be3bf 100644
--- a/src/vue/modules/assets/shared/components/asset-attributes-viewer.vue
+++ b/src/vue/modules/assets/shared/components/asset-attributes-viewer.vue
@@ -31,7 +31,7 @@
             <td>{{ 'assets.balance-title' | globalize }}</td>
             <td>
               {{
-                { value: balance, currency: asset.code } | formatMoney
+                formatMoney({ value: balance, currency: asset.code })
               }}
             </td>
           </tr>
@@ -39,23 +39,24 @@
             <td>{{ 'assets.maximum-title' | globalize }}</td>
             <td>
               {{
-                { value: asset.maxIssuanceAmount, currency: asset.code } |
-                  formatMoney
+                formatMoney({
+                  value: asset.maxIssuanceAmount, currency: asset.code
+                })
               }}
             </td>
           </tr>
           <tr>
             <td>{{ 'assets.issued-title' | globalize }}</td>
             <td>
-              {{ { value: asset.issued, currency: asset.code } | formatMoney }}
+              {{ formatMoney({ value: asset.issued, currency: asset.code }) }}
             </td>
           </tr>
           <tr>
             <td>{{ 'assets.available-title' | globalize }}</td>
             <td>
-              {{ { value: asset.availableForIssuance, currency: asset.code } |
-                formatMoney
-              }}
+              {{ formatMoney({
+                value: asset.availableForIssuance, currency: asset.code
+              }) }}
             </td>
           </tr>
           <tr>
@@ -263,6 +264,7 @@ import TermsViewer from './terms-viewer'
 import EmailGetter from '@/vue/common/EmailGetter'
 import { STELLAR_TYPES } from '@/js/const/asset-subtypes.const'
 import { AssetRecord } from '@/js/records/entities/asset.record'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'asset-attributes-viewer',
@@ -300,6 +302,11 @@ export default {
       return this.$options.filters.globalize(translationId)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/assets/shared/components/asset-card.vue b/src/vue/modules/assets/shared/components/asset-card.vue
index 78d9c17b3..d5b635d52 100644
--- a/src/vue/modules/assets/shared/components/asset-card.vue
+++ b/src/vue/modules/assets/shared/components/asset-card.vue
@@ -13,11 +13,9 @@
         {{ asset.name }}
       </template>
       <template slot="accent-title">
-        <span :title="assetBalance | formatMoney">
-          {{
-            'assets-list.list-item-balance-line' |
-              globalize({ value: assetBalance})
-          }}
+        <span :title="formatMoney(assetBalance)">
+          {{ 'assets-list.list-item-balance-line' | globalize }}
+          {{ formatMoney(assetBalance) }}
         </span>
       </template>
       <template slot="content">
@@ -90,6 +88,7 @@ import { AssetFormer } from '@/js/formers/AssetFormer'
 import { mapGetters, mapActions } from 'vuex'
 import { vuexTypes } from '@/vuex'
 import { types } from '@/vue/modules/assets/shared/store/types'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'asset-card',
@@ -166,5 +165,10 @@ export default {
       this.isDrawerShown = true
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
diff --git a/src/vue/modules/assets/shared/components/logo-viewer.vue b/src/vue/modules/assets/shared/components/logo-viewer.vue
index 6ef712a89..6f18e2316 100644
--- a/src/vue/modules/assets/shared/components/logo-viewer.vue
+++ b/src/vue/modules/assets/shared/components/logo-viewer.vue
@@ -9,7 +9,7 @@
     class="logo-viewer logo-viewer--abbr"
     :class="{ 'logo-viewer--dark' : darkMode }"
   >
-    {{ asset.code | abbreviate }}
+    {{ abbreviate(asset.code) }}
   </p>
 </template>
 
@@ -17,6 +17,7 @@
 import { AssetRecord } from '@/js/records/entities/asset.record'
 
 import { documentsManager } from '@/api'
+import { abbreviate } from '@/js/helpers/abbreviate'
 
 export default {
   name: 'logo-viewer',
@@ -29,6 +30,11 @@ export default {
       return documentsManager.getDocumentUrlByKey(this.asset.logoKey)
     },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/atomic-swap-form/components/atomic-swap-form.vue b/src/vue/modules/atomic-swap-form/components/atomic-swap-form.vue
index 257239a5f..a9a5e8184 100644
--- a/src/vue/modules/atomic-swap-form/components/atomic-swap-form.vue
+++ b/src/vue/modules/atomic-swap-form/components/atomic-swap-form.vue
@@ -60,17 +60,17 @@
           <readonly-field
             class="atomic-swap-form__price"
             :label="'atomic-swap-form.price' | globalize"
-            :value="{
+            :value="formatMoney({
               value: quoteAssetPrice,
               currency: form.quoteAsset,
-            } | formatMoney"
+            })"
           />
           <readonly-field
             :label="'atomic-swap-form.total-price' | globalize"
-            :value="{
+            :value="formatMoney({
               value: totalPrice,
               currency: form.quoteAsset,
-            } | formatMoney"
+            })"
           />
         </div>
       </div>
@@ -131,6 +131,7 @@ import {
   amountRange,
   required,
 } from '@validators'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   submitted: 'submitted',
@@ -268,6 +269,11 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/atomic-swap-form/components/pending-atomic-swap-table-row.vue b/src/vue/modules/atomic-swap-form/components/pending-atomic-swap-table-row.vue
index e8257390f..9c5ef8175 100644
--- a/src/vue/modules/atomic-swap-form/components/pending-atomic-swap-table-row.vue
+++ b/src/vue/modules/atomic-swap-form/components/pending-atomic-swap-table-row.vue
@@ -10,7 +10,7 @@
         />
       </td>
       <td class="pending-atomic-swap-table-row__amount">
-        {{ { value: amount, currency: asset } | formatMoney }}
+        {{ formatMoney({ value: amount, currency: asset }) }}
       </td>
       <td class="pending-atomic-swap-table-row__btn">
         <button
@@ -39,6 +39,7 @@
 <script>
 import TimeoutTicker from '@/vue/common/TimeoutTicker'
 import KeyViewer from '@/vue/common/KeyViewer'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   expandRequested: 'expand-requested',
@@ -62,6 +63,11 @@ export default {
       this.$emit(EVENTS.expandRequested)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/coinpayments-deposit/components/pending-issuances-table-row.vue b/src/vue/modules/coinpayments-deposit/components/pending-issuances-table-row.vue
index 9f9402a79..f0fb391e2 100644
--- a/src/vue/modules/coinpayments-deposit/components/pending-issuances-table-row.vue
+++ b/src/vue/modules/coinpayments-deposit/components/pending-issuances-table-row.vue
@@ -10,7 +10,7 @@
         />
       </td>
       <td class="pending-issuances-table-row__amount">
-        {{ { value: amount, currency: asset } | formatMoney }}
+        {{ formatMoney({ value: amount, currency: asset }) }}
       </td>
       <td class="pending-issuances-table-row__btn">
         <button
@@ -39,6 +39,7 @@
 <script>
 import TimeoutTicker from '@/vue/common/TimeoutTicker'
 import KeyViewer from '@/vue/common/KeyViewer'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   expandRequested: 'expand-requested',
@@ -62,6 +63,11 @@ export default {
       this.$emit(EVENTS.expandRequested)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/fees/components/fees-table.vue b/src/vue/modules/fees/components/fees-table.vue
index b619bc36b..660f566c4 100644
--- a/src/vue/modules/fees/components/fees-table.vue
+++ b/src/vue/modules/fees/components/fees-table.vue
@@ -40,22 +40,22 @@
             </td>
 
             <!-- eslint-disable-next-line -->
-            <td :title="{ value: fee.fixed, currency: fee.asset } | formatMoney">
-              {{ { value: fee.fixed, currency: fee.asset } | formatMoney }}
+            <td :title="formatMoney({ value: fee.fixed, currency: fee.asset })">
+              {{ formatMoney({ value: fee.fixed, currency: fee.asset }) }}
             </td>
 
-            <td :title="fee.percent | formatPercent">
-              {{ fee.percent | formatPercent }}
+            <td :title="formatNumber(fee.percent, ...formatNumberParams)">
+              {{ formatNumber(fee.percent, ...formatNumberParams) }}
             </td>
 
             <!-- eslint-disable-next-line -->
-            <td :title="{ value: fee.lowerBound, currency: fee.asset } | formatMoney">
-              {{ { value: fee.lowerBound, currency: fee.asset } | formatMoney }}
+            <td :title="formatMoney({ value: fee.lowerBound, currency: fee.asset })">
+              {{ formatMoney({ value: fee.lowerBound, currency: fee.asset }) }}
             </td>
 
             <!-- eslint-disable-next-line -->
-            <td :title="{ value: fee.upperBound, currency: fee.asset } | formatMoney">
-              {{ { value: fee.upperBound, currency: fee.asset } | formatMoney }}
+            <td :title="formatMoney({ value: fee.upperBound, currency: fee.asset })">
+              {{ formatMoney({ value: fee.upperBound, currency: fee.asset }) }}
             </td>
           </tr>
         </tbody>
@@ -84,9 +84,11 @@
 import FeeTypeViewer from './viewers/fee-type-viewer'
 import FeeSubtypeViewer from './viewers/fee-subtype-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
+import { formatMoney } from '@/js/helpers/money-helper'
 
-export default {
-  name: 'fees-table',
+export default defineComponent({
   components: {
     FeeTypeViewer,
     FeeSubtypeViewer,
@@ -107,7 +109,19 @@ export default {
       require: true,
     },
   },
-}
+
+  setup () {
+    const formatNumberParams = [
+      6,
+      '%',
+    ]
+    return {
+      formatNumberParams,
+      formatNumber,
+      formatMoney,
+    }
+  },
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/vue/modules/issuance-explorer/components/issuances-table.vue b/src/vue/modules/issuance-explorer/components/issuances-table.vue
index 4c8725667..9c1e82ed9 100644
--- a/src/vue/modules/issuance-explorer/components/issuances-table.vue
+++ b/src/vue/modules/issuance-explorer/components/issuances-table.vue
@@ -35,8 +35,8 @@
                 <email-getter :balance-id="issuance.counterparty" />
               </td>
 
-              <td :title="issuance.amount | formatMoney">
-                {{ issuance.amount | formatMoney }}
+              <td :title="formatMoney(issuance.amount)">
+                {{ formatMoney(issuance.amount) }}
               </td>
 
               <td :title="issuance.asset">
@@ -47,8 +47,8 @@
                 <request-state-viewer :request="issuance" />
               </td>
 
-              <td :title="issuance.date | formatCalendar">
-                {{ issuance.date | formatCalendar }}
+              <td :title="formatCalendar(issuance.date)">
+                {{ formatCalendar(issuance.date) }}
               </td>
 
               <td :title="issuance.reference">
@@ -76,6 +76,8 @@ import EmailGetter from '@/vue/common/EmailGetter'
 import RequestStateViewer from './request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 export default {
   name: 'issuanes-table',
@@ -96,5 +98,11 @@ export default {
       required: true,
     },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
diff --git a/src/vue/modules/movements-history/components/effect-viewers/balance-changed.vue b/src/vue/modules/movements-history/components/effect-viewers/balance-changed.vue
index 9b3bfd574..d0666b205 100644
--- a/src/vue/modules/movements-history/components/effect-viewers/balance-changed.vue
+++ b/src/vue/modules/movements-history/components/effect-viewers/balance-changed.vue
@@ -5,7 +5,7 @@
         {{ 'movements-history.amount-lbl' | globalize }}
       </td>
       <td class="attributes-viewer__table-cell">
-        {{ amount | formatMoney }}
+        {{ formatMoney(amount) }}
       </td>
     </tr>
 
@@ -15,7 +15,7 @@
           {{ 'movements-history.fixed-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ fixedFee | formatMoney }}
+          {{ formatMoney(fixedFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -23,7 +23,7 @@
           {{ 'movements-history.calculated-percent-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ calculatedPercentFee | formatMoney }}
+          {{ formatMoney(calculatedPercentFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -31,7 +31,7 @@
           {{ 'movements-history.total-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ totalFee | formatMoney }}
+          {{ formatMoney(totalFee) }}
         </td>
       </tr>
     </template>
@@ -42,6 +42,7 @@
 import { BalanceChangedEffect } from '../../wrappers/effect'
 
 import { MathUtil } from '@/js/utils'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'balance-changed',
@@ -92,6 +93,11 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/movements-history/components/effect-viewers/particular-balance-changed.vue b/src/vue/modules/movements-history/components/effect-viewers/particular-balance-changed.vue
index afbbd4b83..ed59c5dc8 100644
--- a/src/vue/modules/movements-history/components/effect-viewers/particular-balance-changed.vue
+++ b/src/vue/modules/movements-history/components/effect-viewers/particular-balance-changed.vue
@@ -5,7 +5,7 @@
         {{ 'movements-history.amount-lbl' | globalize }}
       </td>
       <td class="attributes-viewer__table-cell">
-        {{ amount | formatMoney }}
+        {{ formatMoney(amount) }}
       </td>
     </tr>
 
@@ -15,7 +15,7 @@
           {{ 'movements-history.fixed-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ fixedFee | formatMoney }}
+          {{ formatMoney(fixedFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -23,7 +23,7 @@
           {{ 'movements-history.calculated-percent-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ calculatedPercentFee | formatMoney }}
+          {{ formatMoney(calculatedPercentFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -31,7 +31,7 @@
           {{ 'movements-history.total-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ totalFee | formatMoney }}
+          {{ formatMoney(totalFee) }}
         </td>
       </tr>
     </template>
@@ -42,6 +42,7 @@
 import { ParticularBalanceChangeEffect } from '../../wrappers/effect'
 
 import { MathUtil } from '@/js/utils'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   props: {
@@ -87,6 +88,11 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/movements-history/components/movement-summary-viewer.vue b/src/vue/modules/movements-history/components/movement-summary-viewer.vue
index 56323c7e6..30703d151 100644
--- a/src/vue/modules/movements-history/components/movement-summary-viewer.vue
+++ b/src/vue/modules/movements-history/components/movement-summary-viewer.vue
@@ -21,7 +21,7 @@
         {{ 'movements-history.date-lbl' | globalize }}
       </td>
       <td class="attributes-viewer__table-cell">
-        {{ movement.appliedAt | formatCalendar }}
+        {{ formatCalendar(movement.appliedAt) }}
       </td>
     </tr>
   </tbody>
@@ -29,6 +29,7 @@
 
 <script>
 import { Movement } from '../wrappers/movement'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 import TranslationFiltersMixin from '../mixins/translation-filters.mixin'
 
@@ -41,6 +42,11 @@ export default {
       required: true,
     },
   },
+  setup () {
+    return {
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/movements-history/components/movements-table-row.vue b/src/vue/modules/movements-history/components/movements-table-row.vue
index 5b927694f..adb9b2aea 100644
--- a/src/vue/modules/movements-history/components/movements-table-row.vue
+++ b/src/vue/modules/movements-history/components/movements-table-row.vue
@@ -21,15 +21,15 @@
       </td>
       <td
         class="movements-table-row__cell"
-        :title="movement.appliedAt | formatCalendar"
+        :title="formatCalendar(movement.appliedAt)"
       >
-        {{ movement.appliedAt | formatCalendar }}
+        {{ formatCalendar(movement.appliedAt) }}
       </td>
       <td
         class="movements-table-row__cell"
-        :title="movement | movementAmount | formatMoney"
+        :title="formatMoney(movementAmount)"
       >
-        {{ movement | movementAmount | formatMoney }}
+        {{ formatMoney(movementAmount) }}
       </td>
 
       <td
@@ -69,6 +69,8 @@ import TranslationFiltersMixin from '../mixins/translation-filters.mixin'
 import MovementAttributesViewer from './movement-attributes-viewer'
 import MovementDirectionMark from './movement-direction-mark'
 import { MathUtil } from '@/js/utils'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 export default {
   name: 'movement-table-row',
@@ -76,36 +78,44 @@ export default {
     MovementAttributesViewer,
     MovementDirectionMark,
   },
-  filters: {
-    movementAmount (movement) {
-      let currency = movement.assetCode
+  mixins: [TranslationFiltersMixin],
+
+  props: {
+    movement: { type: Movement, required: true },
+  },
+
+  data: () => ({
+    isAttributesViewerShown: false,
+  }),
+
+  computed: {
+    movementAmount () {
+      let currency = this.movement.assetCode
       let value
       const fee = MathUtil.add(
-        movement.effect.calculatedPercentFee,
-        movement.effect.fixedFee
+        this.movement.effect.calculatedPercentFee,
+        this.movement.effect.fixedFee
       )
-      if (movement.isIncoming) {
-        value = MathUtil.subtract(movement.effect.amount, fee)
+      if (this.movement.isIncoming) {
+        value = MathUtil.subtract(this.movement.effect.amount, fee)
       }
-      if (movement.isUnlocked) {
-        value = MathUtil.add(movement.effect.amount, fee)
+      if (this.movement.isUnlocked) {
+        value = MathUtil.add(this.movement.effect.amount, fee)
       }
-      if (movement.isOutgoing || movement.isLocked) {
-        value = -MathUtil.add(movement.effect.amount, fee)
+      if (this.movement.isOutgoing || this.movement.isLocked) {
+        value = -MathUtil.add(this.movement.effect.amount, fee)
       }
 
       return { currency, value }
     },
   },
-  mixins: [TranslationFiltersMixin],
 
-  props: {
-    movement: { type: Movement, required: true },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
   },
-
-  data: () => ({
-    isAttributesViewerShown: false,
-  }),
 }
 </script>
 
diff --git a/src/vue/modules/movements-history/components/operation-viewers/manage-asset-pair.vue b/src/vue/modules/movements-history/components/operation-viewers/manage-asset-pair.vue
index 4b9fa691f..d5fcedeec 100644
--- a/src/vue/modules/movements-history/components/operation-viewers/manage-asset-pair.vue
+++ b/src/vue/modules/movements-history/components/operation-viewers/manage-asset-pair.vue
@@ -20,10 +20,10 @@
       </td>
       <td class="attributes-viewer__table-cell">
         {{
-          {
+          formatMoney({
             value: operationDetails.physicalPrice,
             currency: operationDetails.quoteAssetCode
-          } | formatMoney
+          })
         }}
       </td>
     </tr>
@@ -34,10 +34,10 @@
       </td>
       <td class="attributes-viewer__table-cell">
         {{
-          {
+          formatMoney({
             value: operationDetails.currentPrice,
             currency: operationDetails.quoteAssetCode
-          } | formatMoney
+          })
         }}
       </td>
     </tr>
@@ -79,6 +79,7 @@
 
 <script>
 import { ManageAssetPairOp } from '../../wrappers/operation-details/manage-asset-pair'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   props: {
@@ -87,6 +88,11 @@ export default {
       required: true,
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/movements-history/components/operation-viewers/manage-offer.vue b/src/vue/modules/movements-history/components/operation-viewers/manage-offer.vue
index 16f755d87..666ca19af 100644
--- a/src/vue/modules/movements-history/components/operation-viewers/manage-offer.vue
+++ b/src/vue/modules/movements-history/components/operation-viewers/manage-offer.vue
@@ -49,7 +49,7 @@
         {{ 'movements-history.base-amount-lbl' | globalize }}
       </td>
       <td class="attributes-viewer__table-cell">
-        {{ baseAmount | formatMoney }}
+        {{ formatMoney(baseAmount) }}
       </td>
     </tr>
     <tr class="attributes-viewer__table-row">
@@ -57,7 +57,7 @@
         {{ 'movements-history.quote-amount-lbl' | globalize }}
       </td>
       <td class="attributes-viewer__table-cell">
-        {{ quoteAmount | formatMoney }}
+        {{ formatMoney(quoteAmount) }}
       </td>
     </tr>
     <tr class="attributes-viewer__table-row">
@@ -65,7 +65,7 @@
         {{ 'movements-history.price-lbl' | globalize }}
       </td>
       <td class="attributes-viewer__table-cell">
-        {{ price | formatMoney }}
+        {{ formatMoney(price) }}
       </td>
     </tr>
     <tr class="attributes-viewer__table-row">
@@ -86,6 +86,7 @@
 
 <script>
 import { ManageOfferOp } from '../../wrappers/operation-details/manage-offer'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   props: {
@@ -114,6 +115,11 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/movements-history/components/operation-viewers/payment.vue b/src/vue/modules/movements-history/components/operation-viewers/payment.vue
index de33e35fe..5d649fedd 100644
--- a/src/vue/modules/movements-history/components/operation-viewers/payment.vue
+++ b/src/vue/modules/movements-history/components/operation-viewers/payment.vue
@@ -6,7 +6,7 @@
           {{ 'movements-history.source-fixed-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ sourceFixedFee | formatMoney }}
+          {{ formatMoney(sourceFixedFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -15,7 +15,7 @@
           {{ 'movements-history.source-calculated-percent-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ sourceCalculatedPercentFee | formatMoney }}
+          {{ formatMoney(sourceCalculatedPercentFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -23,7 +23,7 @@
           {{ 'movements-history.destination-fixed-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ destinationFixedFee | formatMoney }}
+          {{ formatMoney(destinationFixedFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -32,7 +32,7 @@
           {{ 'movements-history.destination-calculated-percent-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ destinationCalculatedPercentFee | formatMoney }}
+          {{ formatMoney(destinationCalculatedPercentFee) }}
         </td>
       </tr>
       <tr class="attributes-viewer__table-row">
@@ -40,7 +40,7 @@
           {{ 'movements-history.total-fee-lbl' | globalize }}
         </td>
         <td class="attributes-viewer__table-cell">
-          {{ totalFee | formatMoney }}
+          {{ formatMoney(totalFee) }}
         </td>
       </tr>
     </template>
@@ -104,6 +104,7 @@ import EmailGetter from '@/vue/common/EmailGetter'
 import { PaymentOp } from '../../wrappers/operation-details/payment'
 
 import { MathUtil } from '@/js/utils'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   components: {
@@ -156,6 +157,11 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/pre-issuance-form/components/issuance-viewer.vue b/src/vue/modules/pre-issuance-form/components/issuance-viewer.vue
index ec6428037..b7524849c 100644
--- a/src/vue/modules/pre-issuance-form/components/issuance-viewer.vue
+++ b/src/vue/modules/pre-issuance-form/components/issuance-viewer.vue
@@ -14,7 +14,7 @@
 
           <tr>
             <td>{{ 'pre-issuance-form.amount-lbl' | globalize }}</td>
-            <td>{{ issuance.amount | formatMoney }}</td>
+            <td>{{ formatMoney(issuance.amount) }}</td>
           </tr>
         </tbody>
       </table>
@@ -24,6 +24,7 @@
 
 <script>
 import { Issuance } from '../wrappers/issuance'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'issuance-viewer',
@@ -31,6 +32,11 @@ export default {
   props: {
     issuance: { type: Issuance, required: true },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/create-asset-requests/components/request-attributes-viewer.vue b/src/vue/modules/requests/create-asset-requests/components/request-attributes-viewer.vue
index ff600f711..50a7428fc 100644
--- a/src/vue/modules/requests/create-asset-requests/components/request-attributes-viewer.vue
+++ b/src/vue/modules/requests/create-asset-requests/components/request-attributes-viewer.vue
@@ -5,13 +5,13 @@
         <tr>
           <!-- eslint-disable-next-line max-len -->
           <td>{{ 'create-asset-requests.max-issuance-amount-title' | globalize }}</td>
-          <td>{{ request.maxIssuanceAmount | formatMoney }}</td>
+          <td>{{ formatMoney(request.maxIssuanceAmount) }}</td>
         </tr>
 
         <tr>
           <!-- eslint-disable-next-line max-len -->
           <td>{{ 'create-asset-requests.initial-preissued-amount-title' | globalize }}</td>
-          <td>{{ request.initialPreissuedAmount | formatMoney }}</td>
+          <td>{{ formatMoney(request.initialPreissuedAmount) }}</td>
         </tr>
 
         <tr>
@@ -177,6 +177,7 @@
 import { AssetRequest } from '@/js/records/requests/asset-request.record'
 import { STELLAR_TYPES } from '@/js/const/asset-subtypes.const'
 import { documentsManager } from '@/api'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'request-attributes-viewer',
@@ -215,6 +216,11 @@ export default {
       return this.$options.filters.globalize(translationId)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/create-asset-requests/components/requests-table.vue b/src/vue/modules/requests/create-asset-requests/components/requests-table.vue
index a5ddde6f9..528ba098d 100644
--- a/src/vue/modules/requests/create-asset-requests/components/requests-table.vue
+++ b/src/vue/modules/requests/create-asset-requests/components/requests-table.vue
@@ -38,12 +38,12 @@
               <request-state-viewer :request="request" />
             </td>
 
-            <td :title="request.createdAt | formatCalendar">
-              {{ request.createdAt | formatCalendar }}
+            <td :title="formatCalendar(request.createdAt)">
+              {{ formatCalendar(request.createdAt) }}
             </td>
 
-            <td :title="request.updatedAt | formatCalendar">
-              {{ request.updatedAt | formatCalendar }}
+            <td :title="formatCalendar(request.updatedAt)">
+              {{ formatCalendar(request.updatedAt) }}
             </td>
 
             <td>
@@ -75,6 +75,8 @@ import RequestStateViewer from '../../shared/components/request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
 
+import { formatCalendar } from '@/js/helpers/date-helpers'
+
 const EVENTS = {
   select: 'select',
 }
@@ -101,6 +103,12 @@ export default {
   data: _ => ({
     EVENTS,
   }),
+
+  setup () {
+    return {
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/create-sale-requests/components/request-attributes-viewer.vue b/src/vue/modules/requests/create-sale-requests/components/request-attributes-viewer.vue
index 27f7dbe3a..d51c97884 100644
--- a/src/vue/modules/requests/create-sale-requests/components/request-attributes-viewer.vue
+++ b/src/vue/modules/requests/create-sale-requests/components/request-attributes-viewer.vue
@@ -21,28 +21,28 @@
             <td>
               {{ 'create-sale-requests.start-time-title' | globalize }}
             </td>
-            <td>{{ request.startTime | formatCalendar }}</td>
+            <td>{{ formatCalendar(request.startTime) }}</td>
           </tr>
           <tr>
             <td>
               {{ 'create-sale-requests.close-time-title' | globalize }}
             </td>
             <td>
-              {{ request.endTime | formatCalendar }}
+              {{ formatCalendar(request.endTime) }}
             </td>
           </tr>
           <tr>
             <td>{{ 'create-sale-requests.soft-cap-title' | globalize }}</td>
             <td>
               <!-- eslint-disable-next-line max-len -->
-              {{ { value: request.softCap, currency: request.defaultQuoteAsset } | formatMoney }}
+              {{ formatMoney({ value: request.softCap, currency: request.defaultQuoteAsset }) }}
             </td>
           </tr>
           <tr>
             <td>{{ 'create-sale-requests.hard-cap-title' | globalize }}</td>
             <td>
               <!-- eslint-disable-next-line max-len -->
-              {{ { value: request.hardCap, currency: request.defaultQuoteAsset } | formatMoney }}
+              {{ formatMoney({ value: request.hardCap, currency: request.defaultQuoteAsset }) }}
             </td>
           </tr>
           <tr>
@@ -52,7 +52,7 @@
             </td>
             <td>
               <!-- eslint-disable-next-line max-len -->
-              {{ { value: request.baseAssetForHardCap, currency: request.baseAsset } | formatMoney }}
+              {{ formatMoney({ value: request.baseAssetForHardCap, currency: request.baseAsset }) }}
             </td>
           </tr>
           <tr>
@@ -95,6 +95,8 @@
 <script>
 import { SALE_TYPES } from '@tokend/js-sdk'
 import { CreateSaleRequest } from '../wrappers/create-sale-request'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 export default {
   name: 'request-attributes-viewer',
@@ -109,6 +111,12 @@ export default {
       return keyValue
     },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/create-sale-requests/components/requests-table.vue b/src/vue/modules/requests/create-sale-requests/components/requests-table.vue
index 301ad67b4..336f44e9f 100644
--- a/src/vue/modules/requests/create-sale-requests/components/requests-table.vue
+++ b/src/vue/modules/requests/create-sale-requests/components/requests-table.vue
@@ -45,12 +45,12 @@
               <request-state-viewer :request="request" />
             </td>
 
-            <td :title="request.createdAt | formatCalendar">
-              {{ request.createdAt | formatCalendar }}
+            <td :title="formatCalendar(request.createdAt)">
+              {{ formatCalendar(request.createdAt) }}
             </td>
 
-            <td :title="request.updatedAt | formatCalendar">
-              {{ request.updatedAt | formatCalendar }}
+            <td :title="formatCalendar(request.updatedAt)">
+              {{ formatCalendar(request.updatedAt) }}
             </td>
 
             <td>
@@ -83,6 +83,8 @@ import RequestStateViewer from '../../shared/components/request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
 
+import { formatCalendar } from '@/js/helpers/date-helpers'
+
 const EVENTS = {
   select: 'select',
 }
@@ -109,6 +111,12 @@ export default {
   data: _ => ({
     EVENTS,
   }),
+
+  setup () {
+    return {
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/incoming-withdrawal-requests/components/request-attributes-viewer.vue b/src/vue/modules/requests/incoming-withdrawal-requests/components/request-attributes-viewer.vue
index d307fc8ea..277909a89 100644
--- a/src/vue/modules/requests/incoming-withdrawal-requests/components/request-attributes-viewer.vue
+++ b/src/vue/modules/requests/incoming-withdrawal-requests/components/request-attributes-viewer.vue
@@ -9,7 +9,7 @@
 
         <tr>
           <td>{{ 'incoming-withdrawal-requests.created' | globalize }}</td>
-          <td>{{ request.createdAt | formatCalendar }}</td>
+          <td>{{ formatCalendar(request.createdAt) }}</td>
         </tr>
 
         <tr>
@@ -33,12 +33,12 @@
 
         <tr>
           <td>{{ 'incoming-withdrawal-requests.amount' | globalize }}</td>
-          <td>{{ request.amount | formatMoney }}  </td>
+          <td>{{ formatMoney(request.amount) }}  </td>
         </tr>
 
         <tr>
           <td>{{ 'incoming-withdrawal-requests.fixed-fee' | globalize }}</td>
-          <td>{{ request.fixedFee | formatMoney }}</td>
+          <td>{{ formatMoney(request.fixedFee) }}</td>
         </tr>
 
         <tr>
@@ -46,12 +46,12 @@
             <!-- eslint-disable-next-line max-len -->
             {{ 'incoming-withdrawal-requests.calculated-percent-fee' | globalize }}
           </td>
-          <td>{{ request.calculatedPercentFee | formatMoney }}</td>
+          <td>{{ formatMoney(request.calculatedPercentFee) }}</td>
         </tr>
 
         <tr>
           <td>{{ 'incoming-withdrawal-requests.total-fee' | globalize }}</td>
-          <td>{{ request.totalFee | formatMoney }}</td>
+          <td>{{ formatMoney(request.totalFee) }}</td>
         </tr>
       </tbody>
     </table>
@@ -62,6 +62,8 @@
 import EmailGetter from '@/vue/common/EmailGetter'
 
 import { IncomingWithdrawalRequest } from '../wrappers/incoming-withdrawal-request'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 export default {
   name: 'request-attributes-viewer',
@@ -71,6 +73,12 @@ export default {
   props: {
     request: { type: IncomingWithdrawalRequest, required: true },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/incoming-withdrawal-requests/components/requests-table.vue b/src/vue/modules/requests/incoming-withdrawal-requests/components/requests-table.vue
index 56e51dc12..ed05b2ab8 100644
--- a/src/vue/modules/requests/incoming-withdrawal-requests/components/requests-table.vue
+++ b/src/vue/modules/requests/incoming-withdrawal-requests/components/requests-table.vue
@@ -41,16 +41,16 @@
               {{ request.assetCode }}
             </td>
 
-            <td :title="request.amount | formatMoney">
-              {{ request.amount | formatMoney }}
+            <td :title="formatMoney(request.amount)">
+              {{ formatMoney(request.amount) }}
             </td>
 
             <td>
               <request-state-viewer :request="request" />
             </td>
 
-            <td :title="request.createdAt | formatCalendar">
-              {{ request.createdAt | formatCalendar }}
+            <td :title="formatCalendar(request.createdAt)">
+              {{ formatCalendar(request.createdAt) }}
             </td>
 
             <td>
@@ -82,6 +82,8 @@ import EmailGetter from '@/vue/common/EmailGetter'
 import RequestStateViewer from '../../shared/components/request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 const EVENTS = {
   select: 'select',
@@ -104,6 +106,12 @@ export default {
   data: _ => ({
     EVENTS,
   }),
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/poll-requests/components/request-attributes-viewer.vue b/src/vue/modules/requests/poll-requests/components/request-attributes-viewer.vue
index 1afcfd286..b10dc7c44 100644
--- a/src/vue/modules/requests/poll-requests/components/request-attributes-viewer.vue
+++ b/src/vue/modules/requests/poll-requests/components/request-attributes-viewer.vue
@@ -4,12 +4,12 @@
       <tbody>
         <tr>
           <td>{{ 'poll-requests.start-time-title' | globalize }}</td>
-          <td>{{ request.startTime | formatCalendar }}</td>
+          <td>{{ formatCalendar(request.startTime) }}</td>
         </tr>
 
         <tr>
           <td>{{ 'poll-requests.end-time-title' | globalize }}</td>
-          <td>{{ request.endTime | formatCalendar }}</td>
+          <td>{{ formatCalendar(request.endTime) }}</td>
         </tr>
 
         <tr>
@@ -56,6 +56,7 @@
 <script>
 import { PollRequest } from '../wrappers/poll-request'
 import { keyValues } from '@/key-values'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 const QUESTION_MAX_LEN = 20
 
@@ -88,6 +89,11 @@ export default {
       return this.$options.filters.globalize(translationId)
     },
   },
+  setup () {
+    return {
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/poll-requests/components/requests-table.vue b/src/vue/modules/requests/poll-requests/components/requests-table.vue
index 79dc99796..31453855a 100644
--- a/src/vue/modules/requests/poll-requests/components/requests-table.vue
+++ b/src/vue/modules/requests/poll-requests/components/requests-table.vue
@@ -38,12 +38,12 @@
               <request-state-viewer :request="request" />
             </td>
 
-            <td :title="request.createdAt | formatCalendar">
-              {{ request.createdAt | formatCalendar }}
+            <td :title="formatCalendar(request.createdAt)">
+              {{ formatCalendar(request.createdAt) }}
             </td>
 
-            <td :title="request.updatedAt | formatCalendar">
-              {{ request.updatedAt | formatCalendar }}
+            <td :title="formatCalendar(request.updatedAt)">
+              {{ formatCalendar(request.updatedAt) }}
             </td>
 
             <td>
@@ -75,6 +75,8 @@ import RequestStateViewer from '../../shared/components/request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
 
+import { formatCalendar } from '@/js/helpers/date-helpers'
+
 const EVENTS = {
   select: 'select',
 }
@@ -101,6 +103,12 @@ export default {
   data: _ => ({
     EVENTS,
   }),
+
+  setup () {
+    return {
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/pre-issuance-requests/components/requests-table.vue b/src/vue/modules/requests/pre-issuance-requests/components/requests-table.vue
index 743e02948..c898ef0c0 100644
--- a/src/vue/modules/requests/pre-issuance-requests/components/requests-table.vue
+++ b/src/vue/modules/requests/pre-issuance-requests/components/requests-table.vue
@@ -33,16 +33,16 @@
               {{ request.assetCode }}
             </td>
 
-            <td :title="request.amount | formatMoney">
-              {{ request.amount | formatMoney }}
+            <td :title="formatMoney(request.amount)">
+              {{ formatMoney(request.amount) }}
             </td>
 
             <td>
               <request-state-viewer :request="request" />
             </td>
 
-            <td :title="request.createdAt | formatCalendar">
-              {{ request.createdAt | formatCalendar }}
+            <td :title="formatCalendar(request.createdAt) ">
+              {{ formatCalendar(request.createdAt) }}
             </td>
           </tr>
         </tbody>
@@ -65,6 +65,9 @@ import RequestStateViewer from '../../shared/components/request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
 
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
+
 const EVENTS = {
   select: 'select',
 }
@@ -91,5 +94,11 @@ export default {
   data: _ => ({
     EVENTS,
   }),
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
diff --git a/src/vue/modules/requests/shared/components/asset-logo-viewer.vue b/src/vue/modules/requests/shared/components/asset-logo-viewer.vue
index a0f42c34b..128a25e7f 100644
--- a/src/vue/modules/requests/shared/components/asset-logo-viewer.vue
+++ b/src/vue/modules/requests/shared/components/asset-logo-viewer.vue
@@ -8,17 +8,24 @@
     v-else
     class="asset-logo-viewer asset-logo-viewer__code-abbr"
   >
-    {{ assetCode | abbreviate }}
+    {{ abbreviate(assetCode) }}
   </p>
 </template>
 
 <script>
+import { abbreviate } from '@/js/helpers/abbreviate'
+
 export default {
   name: 'asset-logo-viewer',
   props: {
     assetLogoUrl: { type: String, default: '' },
     assetCode: { type: String, required: true },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/modules/requests/update-asset-requests/components/requests-table.vue b/src/vue/modules/requests/update-asset-requests/components/requests-table.vue
index 53a2634e9..976a1b1b1 100644
--- a/src/vue/modules/requests/update-asset-requests/components/requests-table.vue
+++ b/src/vue/modules/requests/update-asset-requests/components/requests-table.vue
@@ -38,12 +38,12 @@
               <request-state-viewer :request="request" />
             </td>
 
-            <td :title="request.createdAt | formatCalendar">
-              {{ request.createdAt | formatCalendar }}
+            <td :title="formatCalendar(request.createdAt)">
+              {{ formatCalendar(request.createdAt) }}
             </td>
 
-            <td :title="request.updatedAt | formatCalendar">
-              {{ request.updatedAt | formatCalendar }}
+            <td :title="formatCalendar(request.updatedAt)">
+              {{ formatCalendar(request.updatedAt) }}
             </td>
 
             <td>
@@ -75,6 +75,8 @@ import RequestStateViewer from '../../shared/components/request-state-viewer'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
 
+import { formatCalendar } from '@/js/helpers/date-helpers'
+
 const EVENTS = {
   select: 'select',
 }
@@ -101,6 +103,12 @@ export default {
   data: _ => ({
     EVENTS,
   }),
+
+  setup () {
+    return {
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/navigation/Passport.Balances.vue b/src/vue/navigation/Passport.Balances.vue
index 7226607da..9c4afa687 100644
--- a/src/vue/navigation/Passport.Balances.vue
+++ b/src/vue/navigation/Passport.Balances.vue
@@ -8,7 +8,7 @@
       v-for="(item, index) in filteredBalances"
       :key="index"
     >
-      {{ { value: item.balance, currency: item.asset.code } | formatMoney }}
+      {{ formatMoney({ value: item.balance, currency: item.asset.code }) }}
     </span>
 
     <router-link
@@ -25,6 +25,7 @@
 import { vuexTypes } from '@/vuex'
 import { mapGetters, mapActions } from 'vuex'
 import { vueRoutes } from '@/vue-router/routes'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const MAX_BALANCES_COUNT = 3
 const EVENTS = {
@@ -63,6 +64,11 @@ export default {
       this.$emit(EVENTS.moreLinkFollowed)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/navigation/Passport.vue b/src/vue/navigation/Passport.vue
index 2884b3825..a4c6490d8 100644
--- a/src/vue/navigation/Passport.vue
+++ b/src/vue/navigation/Passport.vue
@@ -11,7 +11,7 @@
         v-else
         class="passport__avatar passport__email-abbr-btn"
       >
-        {{ email | abbreviate }}
+        {{ abbreviate(email) }}
       </p>
     </button>
 
@@ -87,6 +87,7 @@ import { mapGetters, mapActions } from 'vuex'
 import { vueRoutes } from '@/vue-router/routes'
 import { handleClickOutside } from '@/js/helpers/handle-click-outside'
 import { ErrorHandler } from '@/js/helpers/error-handler'
+import { abbreviate } from '@/js/helpers/abbreviate'
 import PassportBalances from './Passport.Balances'
 
 export default {
@@ -194,6 +195,11 @@ export default {
       await this.$router.push(vueRoutes.settings)
     },
   },
+  setup () {
+    return {
+      abbreviate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/Limits/Limits.RequestsListRenderer.vue b/src/vue/pages/Limits/Limits.RequestsListRenderer.vue
index 2b891db0a..37b11fbe5 100644
--- a/src/vue/pages/Limits/Limits.RequestsListRenderer.vue
+++ b/src/vue/pages/Limits/Limits.RequestsListRenderer.vue
@@ -32,8 +32,8 @@
             v-for="(request, i) in requests"
             :request="request"
             :key="i">
-            <td :title="request.updatedAt | formatDate">
-              {{ request.updatedAt | formatDate }}
+            <td :title="formatDate(request.updatedAt)">
+              {{ formatDate(request.updatedAt) }}
             </td>
             <!-- eslint-disable-next-line -->
             <td :title="LIMITS_REQUEST_TYPE_TRANSLATION_ID[request.limitsRequestType] | globalize">
@@ -128,6 +128,7 @@ import {
   LIMITS_REQUEST_STATES_STR,
   LIMITS_REQUEST_TYPE,
 } from '@/js/const/limits.const'
+import { formatDate } from '@/js/helpers/date-helpers'
 
 const EVENTS = Object.freeze({
   requestsReloadAsk: 'requests-reload-ask',
@@ -185,6 +186,12 @@ export default {
       this.isDetailsDrawerShown = false
     },
   },
+
+  setup () {
+    return {
+      formatDate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/Limits/Limits.TableRenderer.vue b/src/vue/pages/Limits/Limits.TableRenderer.vue
index f67ed9cde..559668983 100644
--- a/src/vue/pages/Limits/Limits.TableRenderer.vue
+++ b/src/vue/pages/Limits/Limits.TableRenderer.vue
@@ -39,9 +39,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.dailyLeft | formatNumber }}
+                {{ formatNumber(item.dailyLeft) }}
                 /
-                {{ item.dailyOut | formatNumber }}
+                {{ formatNumber(item.dailyOut) }}
               </span>
             </template>
           </td>
@@ -53,9 +53,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.weeklyLeft | formatNumber }}
+                {{ formatNumber(item.weeklyLeft) }}
                 /
-                {{ item.weeklyOut | formatNumber }}
+                {{ formatNumber(item.weeklyOut) }}
               </span>
             </template>
           </td>
@@ -67,9 +67,9 @@
             </template>
             <template v-else>
               <span class="limits-table-renderer__value">
-                {{ item.monthlyLeft | formatNumber }}
+                {{ formatNumber(item.monthlyLeft) }}
                 /
-                {{ item.monthlyOut | formatNumber }}
+                {{ formatNumber(item.monthlyOut) }}
               </span>
             </template>
           </td>
@@ -81,9 +81,9 @@
             </template>
             <template v-else>
               <span>
-                {{ item.annualLeft | formatNumber }}
+                {{ formatNumber(item.annualLeft) }}
                 /
-                {{ item.annualOut | formatNumber }}
+                {{ formatNumber(item.annualOut) }}
               </span>
             </template>
           </td>
@@ -118,22 +118,16 @@ import { STATS_OPERATION_TYPES } from '@tokend/js-sdk'
 import Loader from '@/vue/common/Loader'
 import NoDataMessage from '@/vue/common/NoDataMessage'
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
 
 import config from '../../../config'
 
-const OPERATION_TYPES_TRANSLATION_ID = {
-  [STATS_OPERATION_TYPES.deposit]: 'limits-table-renderer.op-type-deposit',
-  [STATS_OPERATION_TYPES.withdraw]: 'limits-table-renderer.op-type-withdraw',
-  // eslint-disable-next-line
-  [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
-}
-
 const EVENTS = Object.freeze({
   limitsReloadAsk: 'limits-reload-ask',
 })
 
-export default {
-  name: 'limits-table-renderer',
+export default defineComponent({
   components: {
     Loader,
     NoDataMessage,
@@ -144,16 +138,28 @@ export default {
     isLoading: { type: Boolean, required: true, default: false },
     isLoadingFailed: { type: Boolean, required: true, default: false },
   },
-  data: () => ({
-    OPERATION_TYPES_TRANSLATION_ID,
-    MAX_AMOUNT: config.MAX_AMOUNT,
-  }),
-  methods: {
-    askLimitsReload () {
-      this.$emit(EVENTS.limitsReloadAsk)
-    },
+  emits: 'limitsReloadAsk',
+  setup (_, { emit }) {
+    const OPERATION_TYPES_TRANSLATION_ID = {
+      [STATS_OPERATION_TYPES.deposit]: 'limits-table-renderer.op-type-deposit',
+      [STATS_OPERATION_TYPES.withdraw]: 'limits-table-renderer.op-type-withdraw',
+      // eslint-disable-next-line
+      [STATS_OPERATION_TYPES.paymentOut]: 'limits-table-renderer.op-type-payment-out',
+    }
+    const MAX_AMOUNT = config.MAX_AMOUNT
+
+    const askLimitsReload = () => {
+      emit(EVENTS.limitsReloadAsk)
+    }
+
+    return {
+      askLimitsReload,
+      OPERATION_TYPES_TRANSLATION_ID,
+      MAX_AMOUNT,
+      formatNumber,
+    }
   },
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/src/vue/pages/TradeExchange/Trade.HistoryRenderer.vue b/src/vue/pages/TradeExchange/Trade.HistoryRenderer.vue
index 1c025be54..eb2ad2fe8 100644
--- a/src/vue/pages/TradeExchange/Trade.HistoryRenderer.vue
+++ b/src/vue/pages/TradeExchange/Trade.HistoryRenderer.vue
@@ -34,10 +34,10 @@
               <tr
                 v-for="(item, i) in tradeHistory"
                 :key="`trade-history-row-${i}`">
-                <td>{{ item.baseAmount | formatMoney }}</td>
-                <td>{{ item.price | formatMoney }}</td>
-                <td>{{ item.quoteAmount | formatMoney }}</td>
-                <td>{{ item.createdAt | formatCalendar }}</td>
+                <td>{{ formatMoney(item.baseAmount) }}</td>
+                <td>{{ formatMoney(item.price) }}</td>
+                <td>{{ formatMoney(item.quoteAmount) }}</td>
+                <td>{{ formatCalendar(item.createdAt) }}</td>
               </tr>
             </tbody>
             <empty-tbody-placeholder
@@ -62,6 +62,8 @@
 <script>
 import SkeletonLoaderTableBody from '@/vue/common/skeleton-loader/SkeletonLoaderTableBody'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 export default {
   name: 'trade-history-renderer',
@@ -78,6 +80,12 @@ export default {
     tradeHistory: { type: Array, required: true, default: () => [] },
     isLoading: { type: Boolean, required: true, default: false },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/TradeExchange/Trade.OffersRenderer.vue b/src/vue/pages/TradeExchange/Trade.OffersRenderer.vue
index 0682b1448..5a3a78f34 100644
--- a/src/vue/pages/TradeExchange/Trade.OffersRenderer.vue
+++ b/src/vue/pages/TradeExchange/Trade.OffersRenderer.vue
@@ -42,9 +42,9 @@
                 :key="`trade-offers-row-${o}-${updateOffersKey}`"
                 @click="selectOffer(offer)"
                 :disabled="offer.ownerId === accountId">
-                <td>{{ offer.baseAmount | formatMoney }}</td>
-                <td>{{ offer.quoteAmount | formatMoney }}</td>
-                <td>{{ offer.price | formatMoney }}</td>
+                <td>{{ formatMoney(offer.baseAmount) }}</td>
+                <td>{{ formatMoney(offer.quoteAmount) }}</td>
+                <td>{{ formatMoney(offer.price) }}</td>
               </tr>
             </tbody>
             <empty-tbody-placeholder
@@ -88,6 +88,7 @@ import FormMixin from '@/vue/mixins/form.mixin'
 import { TradeFormer } from '@/js/formers/TradeFormer'
 import { vuexTypes } from '@/vuex'
 import { mapGetters } from 'vuex'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   reloadTrades: 'reload-trades',
@@ -159,6 +160,11 @@ export default {
       this.$emit(EVENTS.reloadTrades)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/TradeUserOffers/Trade.OpenOffers.vue b/src/vue/pages/TradeUserOffers/Trade.OpenOffers.vue
index a10c6b6f5..a2ef19716 100644
--- a/src/vue/pages/TradeUserOffers/Trade.OpenOffers.vue
+++ b/src/vue/pages/TradeUserOffers/Trade.OpenOffers.vue
@@ -42,7 +42,7 @@
               :key="`trade-open-offers-row-${i}`"
               @click="selectOffer(offer)">
               <td>{{ offer.id }}</td>
-              <td>{{ offer.createdAt | formatCalendar }}</td>
+              <td>{{ formatCalendar(offer.createdAt) }}</td>
               <td>
                 <template v-if="offer.isBuy">
                   {{ 'trade-open-offers.buy-lbl' | globalize }}
@@ -51,8 +51,8 @@
                   {{ 'trade-open-offers.sell-lbl' | globalize }}
                 </template>
               </td>
-              <td>{{ offer.baseAmount | formatMoney }}</td>
-              <td>{{ offer.price | formatMoney }}</td>
+              <td>{{ formatMoney(offer.baseAmount) }}</td>
+              <td>{{ formatMoney(offer.price) }}</td>
             </tr>
           </tbody>
           <empty-tbody-placeholder
@@ -95,6 +95,8 @@ import Drawer from '@/vue/common/Drawer'
 import { globalize } from '@/vue/filters/globalize'
 import EmptyTbodyPlaceholder from '@/vue/common/EmptyTbodyPlaceholder'
 import { TradeFormer } from '@/js/formers/TradeFormer'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 const EVENTS = {
   reloadOffers: 'reload-offers',
@@ -134,6 +136,12 @@ export default {
       this.$emit(EVENTS.reloadOffers)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/assets/AssetDetails.vue b/src/vue/pages/assets/AssetDetails.vue
index b84ff6968..50d2440f7 100644
--- a/src/vue/pages/assets/AssetDetails.vue
+++ b/src/vue/pages/assets/AssetDetails.vue
@@ -32,7 +32,7 @@
               {{ 'asset-details.balance-title' | globalize }}
             </td>
             <td>
-              {{ asset.balance | formatMoney }}
+              {{ formatMoney(asset.balance) }}
             </td>
           </tr>
           <tr v-if="asset.balance.value">
@@ -40,7 +40,7 @@
               {{ 'asset-details.converted-balance-title' | globalize }}
             </td>
             <td>
-              {{ asset.convertedBalance | formatMoney }}
+              {{ formatMoney(asset.convertedBalance) }}
             </td>
           </tr>
           <tr>
@@ -48,7 +48,7 @@
               {{ 'asset-details.maximum-title' | globalize }}
             </td>
             <td>
-              {{ asset.maxIssuanceAmount | formatMoney }}
+              {{ formatMoney(asset.maxIssuanceAmount) }}
             </td>
           </tr>
           <tr>
@@ -56,7 +56,7 @@
               {{ 'asset-details.issued-title' | globalize }}
             </td>
             <td>
-              {{ asset.issued | formatMoney }}
+              {{ formatMoney(asset.issued) }}
             </td>
           </tr>
           <tr>
@@ -64,7 +64,7 @@
               {{ 'asset-details.available-title' | globalize }}
             </td>
             <td>
-              {{ asset.availableForIssuance | formatMoney }}
+              {{ formatMoney(asset.availableForIssuance) }}
             </td>
           </tr>
           <tr>
@@ -197,7 +197,7 @@
               {{ 'asset-details.maturity-date' | globalize }}
             </td>
             <td>
-              {{ +asset.maturityDate | formatCalendar }}
+              {{ formatCalendar(+asset.maturityDate) }}
             </td>
           </tr>
           <tr v-if="asset.annualReturn">
@@ -302,6 +302,8 @@ import { Bus } from '@/js/helpers/event-bus'
 import { ASSET_SUBTYPE, STELLAR_TYPES } from '@/js/const/asset-subtypes.const'
 import { mapGetters, mapActions } from 'vuex'
 import { vuexTypes } from '@/vuex'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 const EVENTS = {
   balanceAdded: 'balance-added',
@@ -400,6 +402,12 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/atomic-swaps/AtomicSwapAttributes.vue b/src/vue/pages/atomic-swaps/AtomicSwapAttributes.vue
index 7d4dc88d0..cbc598d31 100644
--- a/src/vue/pages/atomic-swaps/AtomicSwapAttributes.vue
+++ b/src/vue/pages/atomic-swaps/AtomicSwapAttributes.vue
@@ -70,7 +70,7 @@
               {{ 'atomic-swap-attributes.created-key' | globalize }}
             </td>
             <td>
-              {{ atomicSwap.createdAt | formatDateDMYT }}
+              {{ formatDateDMYT(atomicSwap.createdAt) }}
             </td>
           </tr>
         </tbody>
@@ -125,6 +125,7 @@
 
 <script>
 import { AtomicSwapRecord } from '@/js/records/entities/atomic-swap.record'
+import { formatDateDMYT } from '@/js/helpers/date-helpers'
 import EmailGetter from '@/vue/common/EmailGetter'
 
 export default {
@@ -140,6 +141,12 @@ export default {
       required: true,
     },
   },
+
+  setup () {
+    return {
+      formatDateDMYT,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/dashboard/Dashboard.AssetSelector.vue b/src/vue/pages/dashboard/Dashboard.AssetSelector.vue
index e4fccc596..8006554b0 100644
--- a/src/vue/pages/dashboard/Dashboard.AssetSelector.vue
+++ b/src/vue/pages/dashboard/Dashboard.AssetSelector.vue
@@ -23,7 +23,7 @@
               v-if="currentAssetCode && !imgUrl"
               class="asset-selector__asset-code-abbr"
             >
-              {{ currentAssetCode | abbreviate }}
+              {{ abbreviate(currentAssetCode) }}
             </p>
           </div>
           <div>
@@ -64,10 +64,10 @@
                 class="asset-selector__asset-value-main"
               >
                 {{
-                  {
+                  formatMoney({
                     value: currentAssetBalanceDetails.balance,
                     currency: currentAssetCode
-                  } | formatMoney
+                  })
                 }}
               </span>
             </div>
@@ -83,10 +83,10 @@
               >
                 <span class="asset-selector__asset-value-secondary">
                   {{
-                    {
+                    formatMoney({
                       value: currentAssetBalanceDetails.convertedBalance,
                       currency: currentAssetBalanceDetails.convertedToAsset
-                    } | formatMoney
+                    })
                   }}
                 </span>
               </div>
@@ -120,6 +120,8 @@ import { api, documentsManager } from '@/api'
 import { ErrorHandler } from '@/js/helpers/error-handler'
 import { AssetRecord } from '@/js/records/entities/asset.record'
 import SkeletonLoader from '@/vue/common/skeleton-loader/SkeletonLoader'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { abbreviate } from '@/js/helpers/abbreviate'
 
 const EVENTS = {
   assetChange: 'asset-change',
@@ -214,6 +216,12 @@ export default {
       }
     },
   },
+  setup () {
+    return {
+      formatMoney,
+      abbreviate,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/polls-all/PollAttributes.vue b/src/vue/pages/polls-all/PollAttributes.vue
index 3fd06b601..c408ed5ff 100644
--- a/src/vue/pages/polls-all/PollAttributes.vue
+++ b/src/vue/pages/polls-all/PollAttributes.vue
@@ -29,7 +29,7 @@
               {{ 'poll-attributes.start-time-key' | globalize }}
             </td>
             <td>
-              {{ poll.startsAt | formatDateDMYT }}
+              {{ formatDateDMYT(poll.startsAt) }}
             </td>
           </tr>
 
@@ -38,7 +38,7 @@
               {{ 'poll-attributes.end-time-key' | globalize }}
             </td>
             <td>
-              {{ poll.endsAt | formatDateDMYT }}
+              {{ formatDateDMYT(poll.endsAt) }}
             </td>
           </tr>
 
@@ -80,7 +80,7 @@
               {{ 'poll-attributes.number-of-choices-key' | globalize }}
             </td>
             <td>
-              {{ poll.numberOfChoices | formatNumber }}
+              {{ formatNumber(poll.numberOfChoices) }}
             </td>
           </tr>
         </tbody>
@@ -93,10 +93,11 @@
 import { PollRecord } from '@/js/records/entities/poll.record'
 import EmailGetter from '@/vue/common/EmailGetter'
 import { keyValues } from '@/key-values'
+import { defineComponent } from 'vue'
+import { formatNumber } from '@/js/helpers/number-helper'
+import { formatDateDMYT } from '@/js/helpers/date-helpers'
 
-export default {
-  name: 'poll-attributes',
-
+export default defineComponent({
   components: {
     EmailGetter,
   },
@@ -147,7 +148,14 @@ export default {
       return this.$options.filters.globalize(translationId)
     },
   },
-}
+
+  setup () {
+    return {
+      formatNumber,
+      formatDateDMYT,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/vue/pages/sale-details/SaleOverviewDetails.vue b/src/vue/pages/sale-details/SaleOverviewDetails.vue
index 5a7976a46..94094b2ca 100644
--- a/src/vue/pages/sale-details/SaleOverviewDetails.vue
+++ b/src/vue/pages/sale-details/SaleOverviewDetails.vue
@@ -16,7 +16,7 @@
             {{ 'sale-overview.start-time-title' | globalize }}
           </td>
           <td>
-            {{ sale.startTime | formatCalendar }}
+            {{ formatCalendar(sale.startTime) }}
           </td>
         </tr>
 
@@ -25,7 +25,7 @@
             {{ 'sale-overview.close-time-title' | globalize }}
           </td>
           <td>
-            {{ sale.endTime | formatCalendar }}
+            {{ formatCalendar(sale.endTime) }}
           </td>
         </tr>
 
@@ -35,7 +35,7 @@
           </td>
           <td>
             <!-- eslint-disable-next-line max-len -->
-            {{ { value: sale.softCap, currency: sale.defaultQuoteAsset } | formatMoney }}
+            {{ formatMoney({ value: sale.softCap, currency: sale.defaultQuoteAsset }) }}
           </td>
         </tr>
 
@@ -45,7 +45,7 @@
           </td>
           <td>
             <!-- eslint-disable-next-line max-len -->
-            {{ { value: sale.hardCap, currency: sale.defaultQuoteAsset } | formatMoney }}
+            {{ formatMoney({ value: sale.hardCap, currency: sale.defaultQuoteAsset }) }}
           </td>
         </tr>
 
@@ -56,7 +56,7 @@
           </td>
           <td>
             <!-- eslint-disable-next-line max-len -->
-            {{ { value: sale.baseHardCap, currency: sale.baseAsset } | formatMoney }}
+            {{ formatMoney({ value: sale.baseHardCap, currency: sale.baseAsset }) }}
           </td>
         </tr>
 
@@ -115,6 +115,8 @@
 <script>
 import { SALE_TYPES } from '@tokend/js-sdk'
 import { SaleRecord } from '@/js/records/entities/sale.record'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 import EmailGetter from '@/vue/common/EmailGetter'
 
 export default {
@@ -133,6 +135,12 @@ export default {
       return keyValue
     },
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/sale-details/SaleStateWidget.vue b/src/vue/pages/sale-details/SaleStateWidget.vue
index 1df828b73..e2131a4d4 100644
--- a/src/vue/pages/sale-details/SaleStateWidget.vue
+++ b/src/vue/pages/sale-details/SaleStateWidget.vue
@@ -2,7 +2,7 @@
   <div class="sale-state-widget">
     <p class="sale-state-widget__invested">
       <!-- eslint-disable-next-line max-len -->
-      {{ { value: sale.currentCap, currency: sale.defaultQuoteAsset } | formatMoney }}
+      {{ formatMoney({ value: sale.currentCap, currency: sale.defaultQuoteAsset }) }}
     </p>
 
     <p class="sale-state-widget__funded">
@@ -73,6 +73,7 @@ import InvestForm from '@/vue/forms/InvestForm'
 
 import { SaleRecord } from '@/js/records/entities/sale.record'
 import { SALE_STATES } from '@/js/const/sale-states'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 const EVENTS = {
   saleUpdated: 'sale-updated',
@@ -92,6 +93,11 @@ export default {
     SALE_STATES,
     EVENTS,
   }),
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
 
diff --git a/src/vue/pages/sale-details/SaleStatisticsViewer.vue b/src/vue/pages/sale-details/SaleStatisticsViewer.vue
index 5ceb6e424..fb7598411 100644
--- a/src/vue/pages/sale-details/SaleStatisticsViewer.vue
+++ b/src/vue/pages/sale-details/SaleStatisticsViewer.vue
@@ -19,10 +19,10 @@
                 </td>
                 <td>
                   {{
-                    {
+                    formatMoney({
                       value: investment.amount,
                       currency: investment.quoteAsset.id
-                    } | formatMoney
+                    })
                   }}
                 </td>
               </tr>
@@ -70,6 +70,7 @@ import { api } from '@/api'
 import { ErrorHandler } from '@/js/helpers/error-handler'
 
 import { SaleRecord } from '@/js/records/entities/sale.record'
+import { formatMoney } from '@/js/helpers/money-helper'
 
 export default {
   name: 'sale-statictics-viewer',
@@ -122,5 +123,10 @@ export default {
       this.investments = this.investments.concat(investments)
     },
   },
+  setup () {
+    return {
+      formatMoney,
+    }
+  },
 }
 </script>
diff --git a/src/vue/pages/sales/SaleOverview.vue b/src/vue/pages/sales/SaleOverview.vue
index 2abc51cad..2bfa2ec1f 100644
--- a/src/vue/pages/sales/SaleOverview.vue
+++ b/src/vue/pages/sales/SaleOverview.vue
@@ -37,7 +37,7 @@
                 {{ 'sale-overview.start-time-title' | globalize }}
               </td>
               <td>
-                {{ sale.startTime | formatCalendar }}
+                {{ formatCalendar(sale.startTime) }}
               </td>
             </tr>
 
@@ -46,7 +46,7 @@
                 {{ 'sale-overview.close-time-title' | globalize }}
               </td>
               <td>
-                {{ sale.endTime | formatCalendar }}
+                {{ formatCalendar(sale.endTime) }}
               </td>
             </tr>
 
@@ -56,7 +56,7 @@
               </td>
               <td>
                 <!-- eslint-disable-next-line max-len -->
-                {{ { value: sale.softCap, currency: sale.defaultQuoteAsset } | formatMoney }}
+                {{ formatMoney({ value: sale.softCap, currency: sale.defaultQuoteAsset }) }}
               </td>
             </tr>
 
@@ -66,7 +66,7 @@
               </td>
               <td>
                 <!-- eslint-disable-next-line max-len -->
-                {{ { value: sale.hardCap, currency: sale.defaultQuoteAsset } | formatMoney }}
+                {{ formatMoney({ value: sale.hardCap, currency: sale.defaultQuoteAsset }) }}
               </td>
             </tr>
 
@@ -77,7 +77,7 @@
               </td>
               <td>
                 <!-- eslint-disable-next-line max-len -->
-                {{ { value: sale.baseHardCap, currency: sale.baseAsset } | formatMoney }}
+                {{ formatMoney({ value: sale.baseHardCap, currency: sale.baseAsset }) }}
               </td>
             </tr>
 
@@ -129,6 +129,8 @@ import { SaleRecord } from '@/js/records/entities/sale.record'
 
 import { mapGetters, mapActions } from 'vuex'
 import { vuexTypes } from '@/vuex'
+import { formatMoney } from '@/js/helpers/money-helper'
+import { formatCalendar } from '@/js/helpers/date-helpers'
 
 export default {
   name: 'sale-overview',
@@ -172,6 +174,12 @@ export default {
       loadAssets: vuexTypes.LOAD_ASSETS,
     }),
   },
+  setup () {
+    return {
+      formatMoney,
+      formatCalendar,
+    }
+  },
 }
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index d399fd1bd..6c5361001 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3521,7 +3521,7 @@ data-urls@^2.0.0:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug-log@^1.0.0:
   version "1.0.1"