No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How do i add global filters to Quasar?

    Help
    4
    7
    2478
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      Abdullah Sohail last edited by

      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.

      gvorster 1 Reply Last reply Reply Quote 0
      • J
        jraez last edited by

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

        1 Reply Last reply Reply Quote 0
        • A
          Abdullah Sohail last edited by

          Any specific reasons for favouring mixins over filters ?

          1 Reply Last reply Reply Quote 0
          • J
            jraez last edited by

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

            1 Reply Last reply Reply Quote 1
            • T
              tof06 last edited by

              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

              1 Reply Last reply Reply Quote 1
              • A
                Abdullah Sohail last edited by

                Thanks @jraez and @tof06

                1 Reply Last reply Reply Quote 0
                • gvorster
                  gvorster @Abdullah Sohail last edited by 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
                  
                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post