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.
-
You should use
vue mixins
https://vuejs.org/v2/guide/mixins.html -
Any specific reasons for favouring mixins over filters ?
-
You define filters in the mixin. Then the mixin globally or per component that requires it.
-
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 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