Vue.js Create a helper class to call your methods globally

Question

I have just started my first project with Vue.js, I have managed to do a lot of basic things and now I am trying to structure the project. I want to achieve the highest possible code reuse. One of the most frequent cases of my application is going to be showing messages of different types, confirmation, information, etc. For this reason, I want to create a mechanism that allows me to launch these messages globally, regardless of where I call them.

As far as I have been able to advance, I have opted for the following variant:

1- I have created a directory called classes in my src directory.

2- I have created a file called MessageBox.js inside classes directory with the following content:

import Vue from 'vue';

export default class MessageBox extends Vue {
  confirm() {
    return alert('Confirm');
  }

  information() {
    return alert('Information');
  }
}

I define it like this because I want to call these methods globally as follows:

MessageBox.confirm();

I am really new to Vue.js and I was wondering if there is any other way to achieve the results I am looking for in a more efficient way .... or .. maybe more elegant?

Thank you very much in advance..

Answer 1

It's an antipattern in modern JavaScript to merge helper functions that don't rely on class instance into a class. Modules play the role of namespaces.

Helper functions can be defined as is:

messageBox.js

export function confirm() {
  return alert('Confirm');
}

They can be imported and used in component methods. In case they need to be used in templates, they can be assigned to methods where needed one by one:

Some.vue

import { confirm } from './util/messageBox';

export default {
  methods: { confirm }
}

Or all at once:

import * as messageBox from './util/messageBox';

export default {
  methods: { ...messageBox }
}

Helpers can be also be made reusable as Vue mixins:

messageBox.js

...
export const confirmMixin = {
  methods: { confirm };
}

export default {
  methods: { confirm, information };
}

And used either per component:

Some.vue

import { confirmMixin } from './util/messageBox';

export default {
  mixins: [confirmMixin]
}

Or globally (isn't recommended because this introduces same maintenance problems as the use of global variables):

import messageBoxMixin from './util/messageBox';

Vue.mixin(messageBoxMixin);

Answer 2

There are at least 2 ways of going about this:

Event bus

Rely on Vue.js internals to create a simple EventBus. This is a design pattern used in Vue.js.

Create a file and add the following lines to it

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

Create your component that takes care of displaying global dialogs. This is usually registered at the top of the tree, so it can cover the entire real estate.

Import the event bus import EventBus from 'event_bus' and then register for the new events

EventBus.$on('SHOW_CONFIRM', (data) => {
 // business logic regarding confirm dialog
})

Now you can import it in any component that wants to fire an event like so

EventBus.$emit('SHOW_CONFIRM', confirmData);

Vuex

You can also use vuex to store global data regarding dialogs and add mutations to trigger the display of the dialogs.

Again, you should define a component that takes care of displaying and push it towards the top of the visual tree.

Note: in both cases you should handle cases in which multiple dialog need to be shown at the same time. Usually using a queue inside the displaying component works.