Common Methods in Vue

If you have a few methods that are reusable by different components, is there a way to do this in the same “main.js” script for example, instead of another additional script (for example: “common.js”)?

I don’t mean just adding them in a script tag in the “main.js” though. I mean - use them in some sort of vue fashion. Again, assuming no web pack or other installations. Just pure vue.

For example - if I have a FormatDate(date) function that I want to use everytime I’m adding a date (in different components) - how can I get this common method utilized (short of what I mentioned above: Ex: “common.js”)?

1 Like

Inject into global in main.js?

global.FormatDate = (date) => {
  // do something
}

You could use a mixin or plugin of global methods.

1 Like

It depends:

  1. If it is a general purpose “method” / “function”, I would go for a separate date.js file, which is imported as any other non vue specific library.

Besides: you know of date-fns and momentjs ?

  1. If it is really a vue specific “method”, I would go for a mixin or a plugin as @JamesThomson mentioned.

The upside of (1) is, that you could reuse it in non-vue-apps.

2 Likes

I’m more comfortable separating out functions (methods) into their own .js files (common.js, dates.js, calculations.js) - if they’re going to be reusable.

I just wasn’t sure if using the mixin capability had some kind of vue.js benefit to it!

For utility functions I prefer exporting them from js files.

I wouldn’t say mixins are meant for utility related methods. They’re much more useful when sharing options (data, computed properties, props, hooks, etc.) across similar components.

E.g. I have a card component that can be flipped over to reveal the backside of the card. I use a mixin to share this functionality between different types of card components. This is when their benefit shines.

1 Like

When you say “mixin” - where is the benefit of doing it that way as opposed to simply having this method in a “common.js” or “utilities.js” file, for example? I don’t say this as a critic, but as someone who is very interested in understanding the “vue” benefits over old-style javascript development. :smiley:

Mixins are useful if you have a feature that requires a combination of methods, state, computed properties and lifecycle hooks. For example Vuelidate.

If it’s just a simple function, a regular import is simpler.

1 Like

When you say “import”, you are referring to placing a tag in your index.html, for example, correct?

I cannot currently install Vuelidata or know what it does, but I"m assuming it performs some form of validation. Again, where is the benefit of using THIS as opposed to simply having a “validate.js” with complex logic and functions in it?

Are you saying that it’s better as a mixin - because using an import would require passing in all these values (computed properties, state, etc.) into the “validate.js” file? And a mixin keeps everything all in the same file?

I meant ES6 module imports.
Plain old script tags and global variables scales poorly for complex apps. A file count of my source folder shows 420 files, and we also use 38 external npm packages. This is not specific to Vue though, but is standard modern javascript development, using Webpack, NPM, Babel etc.

I’m confused, sorry.

You say you have 420 files - not specific to Vue. I still don’t follow the layman’s term benefits.
Are you saying that with Vue - and NOT using script tags - you have less files?

The benefit is that even though my app includes 420 files and 38 external packages, it is still manageable, and does not run into load-order or namespacing issues. This is not because of Vue, but ES6 modules.

To answer your original question though, if you want a method to be available for all your Vue components, you can add it to the prototype like:

Vue.prototype.$hello = function(){
  return 'Hello 🌎'
}

It’s a convention to prefix all global things in Vue with $.

3 Likes

How would I reference this in a component?

Say:

<button @click=“alert($hello);”>

?

Yup, except since it’s a function, you should add parentheses at the end.

Gotcha, thanks!

I’m revisiting this conversation -

When you say “add it to the prototype” - what do you mean.
I understand the example - but where do I put this - at the top (or bottom) of the main.js file?
Or in the root that’s in the main.js?

If I use this code, do I need to add other code for prototype functionality - or is this just a javascript thing? I’ve heard it before - to create objects, right?

You can put in your main.js, somewhere before new Vue({...
Prototypes are JavaScript’s version of Classes. You don’t need anything else to use this.