How to add custom filters in vue-storefront?

Custom filters with vue storefront

It’s quite easy to make your own filters in vue storefront. Need to follow the below steps.

1. You need to make filters within your theme

• Go to your theme’s root directory and make one directory having name ‘filters’
• Write the index.js file to register your all custom filters
• Write your filter file and import them in index.js of your filters

theme/default/filters/cuprice.js

theme/default/filters/index.js

Example:

1. index.js

import { cuprice } from ‘./cuprice’
export {
  cuprice
}

2. cuprice.js

import { currentStoreView } from '@vue-storefront/core/lib/multistore'
export function dnprice (value) {
  if (isNaN(value)) {
    return value
  }
  let formattedVal = Math.abs(parseFloat(value)).toFixed(2)
  const storeView = currentStoreView()
  const prependCurrency = (price) => {
    return storeView.i18n.currencySign + price
  }
  const appendCurrency = (price) => {
    return price + storeView.i18n.currencySign
  }
  if (storeView.i18n.currencySignPlacement === 'append') {
    formattedVal = appendCurrency(formattedVal)
  } else {
    formattedVal = prependCurrency(formattedVal)
  }
  if (value >= 0) {
    return formattedVal
  } else {
    return '-' + formattedVal
  }
}

2. You need to register your filter

Goto your index.js of your theme file and import your filters as below sample code.

import * as themeFilters from './filters'
Object.keys(themeFilters).forEach(key => {
  Vue.filter(key, themeFilters[key])
})

theme/index.js

3. And use in your theme template directly.

Use filter in your template file directly