Vue.js - Making helper functions globally available to single-file components

Otherwise, you could try to make your helpers function a plugin:

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

const plugin = {
  install () {
    Vue.helpers = helpers
    Vue.prototype.$helpers = helpers
  }
}

Vue.use(plugin)

In your helper.js export your functions, this way:

const capFirstLetter = (val) => val.charAt(0).toUpperCase() + val.slice(1);
const img2xUrl = (val) => `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;

export default { capFirstLetter, img2xUrl };

or

export default { 
  capFirstLetter(val) {
    return val.charAt(0).toUpperCase() + val.slice(1);
  },
  img2xUrl(val) {
    return `${val.replace(/(\.[\w\d_-]+)$/i, '@2x$1')} 2x`;
  },
};

You should then be able to use them anywhere in your components using:

this.$helpers.capitalizeFirstLetter()

or anywhere in your application using:

Vue.helpers.capitalizeFirstLetter()

You can learn more about this in the documentation: https://v2.vuejs.org/v2/guide/plugins.html

Create a new mixin:

"src/mixins/generalMixin.js"

Vue.mixin({
  methods: {
    capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }    
  }
})

Then import it into your main.js like:

import '@/mixins/generalMixin'

From now on you will be able to use the function like this.capitalizeFirstLetter(str) within your component script or without this in a template. i.e.:

<template>
    <div>{{ capitalizeFirstLetter('hello') }}</div>
</template>

You have to use this because you mixed a method into the main Vue instance. If there are ways of removing this it will probably involve something unconventional, this at least is a documented way of sharing functions which will be easy to understand for any future Vue devs to your project.

Using Webpack v4

Create a separate file for readability (just dropped mine in plugins folder). Reproduced from @CodinCat and @digout responses.

//resources/js/plugins/mixin.js
import Vue from 'vue';
    
Vue.mixin({
  methods: {
    capitalizeFirstLetter: str => str.charAt(0).toUpperCase() + str.slice(1),
    sampleFunction() {
      alert('Global Functions');
    },
  }
});

Then, import in your main.js or app.js file.

//app.js
import mixin from './plugins/mixin';

USAGE:

Call this.sampleFunction() or this.capitalizeFirstLetter().

Use a global filter if it only concerns how data is formatted when rendered. This is the first example in the docs:

{{ message | capitalize }}

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Great question. In my research I found vue-inject can handle this in the best way. I have many function libraries (services) kept separate from standard vue component logic handling methods. My choice is to have component methods just be delegators that call the service functions.

https://github.com/jackmellis/vue-inject

Here is another way to do so, the way I use global helpers. First, I create a src/utils/ directory and create helpers.js file that includes the following:

import Vue from 'vue'
const { t } = require('typy')

export function range(start, end) {
    if (!t(start).isNumber || !t(end).isNumber) return

    return Math.floor(Math.random() * (end - start + 1)) + start
}

export function testHelper() {
    console.log('helper called ---')
    return
}

Object.defineProperties(Vue.prototype, {
    $help: {
        get() {
            return {
                range,
                testHelper
            }
        }
    }
})

Then, this file should be inserted into the main.js file as follows:

import 'utils/helpers'

Then, in any component you can access is like:

this.$help.testHelper() and this.$help.range(start, end)

For me, this is a convenient way to so. To be honest, have not try out with mixin, but it also looks like proper and easy way to use helpers globally.

Hope that helps. Cheers!