How do i add global filters to Quasar?

[Abdullah Sohail]

I cant seem to figure out how to add filters globally . Should i make a folder for global filters and then export the filter file but where do i refer it there isn’t any option for filters in quasar.config.js.

[jraez]

You should use vue mixins https://vuejs.org/v2/guide/mixins.html

[Abdullah Sohail]

Any specific reasons for favouring mixins over filters ?

[jraez]

You define filters in the mixin. Then the mixin globally or per component that requires it.

[tof06]

You can also use a boot file to declare global filter :

// src/boot/filters.js
export default ({ Vue}) => {
  Vue.filter('YourAwesomeFilter', function (value) {
    return ... 
  })
}

Don’t forget to reference your file in quasar.conf.js

[Abdullah Sohail]

Thanks @jraez and @tof06

[gvorster]

@abdullah-sohail said in How do i add global filters to Quasar?:

I cant seem to figure out how to add filters globally . Should i make a folder for global filters and then export the filter file but where do i refer it there isn’t any option for filters in quasar.config.js.

I am using Quasar 2.0.3 and a global filter can be setup like described here: https://v3.vuejs.org/guide/migration/filters.html#global-filters

I needed a global dateFormat filter and this example works for me:

boot file:

import { boot } from 'quasar/wrappers'

export default boot(async ( { app } ) => {
  app.config.globalProperties.$filters = {
    dateFormat(value) {
      return 'date filter: ' + value
    }
  }
})

template:

<template>
    <q-page padding>
        {{$filters.dateFormat("hello")}}
    </q-page>
</template>

Output:

date filter: hello