How to create global functions in quasar v1?



  • Hello,

    I created a boot file and loaded it inside the quasar config file.

    But what I cannot work out is how to create a function that I can reuse in any vue.js files?

    Would you have a short example please?

    Thanks



  • Just attach it to the Vue prototype in your boot file, similar to how Axios is added.

    import myFunction from 'src/utils/myFunction' 
    
    export default ({ Vue }) => {
      Vue.prototype.$myFunction = myFunction
    }
    

    You can then access the function via this.$myFunction.

    It’s always good practice to add the $ to show it’s a custom function and additional to Vue.

    Scott



  • Hi Scott,

    Superb, thank you. Let me give it a shot.



  • Strangely I cannot get it to work.

    I created a new folder in:
    src/functions/functions.js

    and added this inside:

    const myFunction = function () {
      let min = 1;
      let max = 65000;
      return Math.floor(Math.random() * (max - min + 1)) + min;
    };
    
    export default myFunction;
    

    Now in my boot/globalFunctions.js

    I have:

    import { myFunction } from '../functions/functions';
    
    export default async ({ Vue }) => {
      Vue.prototype.$myFunction = myFunction;
    };
    

    I keep getting this error:
    76:10 error myFunction not found in ‘…/boot/globalFunctions’ import/named



  • Try without {} in your import

    import myFunction from '../functions/functions'
    


  • Thanks Yes I just tried it and now I am getting something. But, the function, instead of giving me a return, it output the whole function as text in my vue file:

    like this:
    function myFunction() { var min = 1; var max = 65000; return Math.floor(Math.random() * (max - min + 1)) + min; }

    When used this way:

    data () {
        return {
          myFunction: this.$myFunction
    }
    }
    


  • oh my bad…what an idiot I am…I output the function as {{ myFunction }} oups~! sorry



  • Still, I was expecting to see my function return when doing this:

    {{ myFunction }}
    
    data () {
        return {
          myFunction: ''
    }
    },
    
      mounted () {
        this.myFunction = this.$myFunction;
      },
    

    But all I see is the output of what is written inside the function as a string and not the return calculations, any idea why please? I am lost on this one.



  • Ok My bad, another mistake…the export had to be like this:

    from
    export default myFunction;
    
    to
    export default myFunction();
    


  • Looks like you might need some JS basic training. You should be invoking the function during the assignment to your data prop and not during the export.

    i.e.

      mounted () {
        this.myFunction = this.$myFunction();
      },
    

    Notice the parenthesis…

    And theoretically, wherever you need the function results in your template, with the global, you can just call it in your template.

    i.e.

    {{ $myFunction() }}
    

    No need to put it into a data prop first.

    Scott



  • I from the PHP world, still trying to get into JS. Thanks for this.



  • Actually, the above is partially basic JS and partially basic VueJS. You should learn both well. Then Quasar becomes a powerhouse for you.

    Scott



  • The whole export / import thing is not something I learned years ago in javascript(8 to 10 years ago). Getting used to it now.
    I love Quasar, this is my second app built with it.
    What I like about Quasar is how it is organized, especially with Vuex and how you can easily build an app that works on Cordova or an HTTP server.
    I am not really a big fan of pure javascript, to be honest, but I like to use Vue.js and the way things are shortened(when used with lodash). A lot of things are happening behind the hood which I believe would be difficult to built-in pure JS. I just stick to CRUDs and Restful APIs, that’s good enough for me to build what I need to build.


Log in to reply