VueJs - How to properly register global helpers function?

The global helper function is a function that is shared across all components and can access from every component. It is often used to share a common utility that does not belong to any particular component. In this article we will create function call getUniqueArray and call it in component as a example.

Create your global helper function

In your src/helpers/helper.js write any global function

export default {
    getUniqueArray(arr) {
        return [ Set(arr)];

Register your global function

In main.js

import Vue from 'vue'
import App from './App.vue'
import helpers from './helpers/helper'

Vue.config.productionTip = false

const plugins = {
  install() {
      Vue.helpers = helpers;
      Vue.prototype.$helpers = helpers;

new Vue({
  render: h => h(App),

Using global helper function

After register global helper function you can access function by this.$helpers.functionName() or Vue.helpers.functionName()

        {{ uniqueArray }}

export default {
    data() {
        return {
            duplicate_array: [1, 1, 2, 2, 3, 4]
    computed: {
        uniqueArray() {
            return this.$helpers.getUniqueArray(this.duplicate_array)