Registering globally your helpers in a Vue app

Stop importing your helpers everywhere you need them .It’s very common to have a helpers folder in any web app project. In this folder, you put files containing utility functions regarding a specific topic. For example, it may be string helpers with capitalize, normalize or dasherize functions.

A very good example of helpers is date manipulation. In my current project, we use moment.js to parse and manage DateTimes. It’s a better way to import the plugin at one single place in the app and then import the dateHelpers everywhere it’s needed. Therefore, the day we change for another date plugin, we will only must update the dateHelpers file.

However, importing the helpers each time is quite boring and even though IDEs are good at auto-importing files ; it could be very cool to avoid imports and have like a static way to call these helpers.

Browsing the Vue documentation, I’ve found this section which was very handy and can fit our need:

Adding helpers to Vue

I’ve created 2 helpers, string-helpers and date-helpers:

Extending Vue instance and constructor

Following the Vue documentation (previous provided link), we just need 2 statements to extend both Vue instance and constructor:

import Vue from 'vue'
import dateHelpers from '@/helpers/date-helpers'
import stringHelpers from '@/helpers/string-helpers'
Vue.prototype.dateHelpers = dateHelpers
Vue.dateHelpers = dateHelpers
Vue.prototype.stringHelpers = stringHelpers
Vue.stringHelpers = stringHelpers

A conventional way is to create a plugin in an index.js file as follows:

And then, we can add this plugin in main.js. The install method will be called with the Vue.use function.

import helpers from '@/helpers'
//...
Vue.use(helpers)

new Vue({
  render: (h) => h(App)
}).$mount('#app')

Updating the components and utility functions

Now, we must update the usage of helpers by modifying the instructions.

- means removing the line
_+_means adding the line

**Components**

- import * as dateHelpers from '@/helpers/date-helpers'
- dateHelpers.format(new Date())
+ this.dateHelpers.format(new Date())
// this refers to the current Vue instance

**Utility functions**

// date-helpers.js
- import * as sHelpers from './string-helpers'
- const getMonths = (lang = 'en') => moment.localeData(lang).months().map(sHelpers.capitalize)
+ const getMonths = (lang = 'en') => moment.localeData(lang).months().map(Vue.stringHelpers.capitalize)

Now, this is super handy to call the custom helpers you create either from a component file or a toolbox file.

What about Typescript support

If you use Typescript, you will get some errors because Typescript compiler is not aware of these new methods.

Module augmentation is an helpful feature from Typescript to extend a module. In a @types folder, we can create a helpers.d.ts containing:

Thus, the errors with Vue.stringHelpers or this.dateHelpers will disappear. Relaunching the IDE might be required if TS compiler does not update the compiling errors.

Ending words…

In fact, it was quite easy, right!? Anyway, I recommend you to personalise the name you give to the extension. Indeed, when a new developer will join the team, he/she won’t know if Vue.stringHelpers comes from Vue framework or your custom extension.

Suggest:

☞ Learn Vue.js from scratch 2018

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ Vue.js Tutorial: Zero to Sixty

☞ Learn Vue.js from Scratch - Full Course for Beginners

☞ Build a Quiz App Using Vue JS | Vue JS Quiz App Demo | Vue JS Project Tutorial | Simplilearn

☞ Create Shopping basket page With Vuejs and Nodejs