How to create global functions in quasar v1?

bambinou

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

s.molinari

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

bambinou

Hi Scott,

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

bambinou

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

tof06

Try without {} in your import

import myFunction from '../functions/functions'

bambinou

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
}
}

bambinou

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

bambinou

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.

bambinou

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

from
export default myFunction;

to
export default myFunction();

s.molinari

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

bambinou

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

s.molinari

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

Scott

bambinou

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.

No More Posting New Topics!

How to create global functions in quasar v1?