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

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


inside any component without having to first import them and then prepend this to the function name

What you described is mixin.

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

This is a global mixin. with this ALL your components will have a capitalizeFirstLetter method, so you can call this.capitalizeFirstLetter(...) from component methods or you can call it directly as capitalizeFirstLetter(...) in component template.

Working example: http://codepen.io/CodinCat/pen/LWRVGQ?editors=1010

See the documentation here: https://vuejs.org/v2/guide/mixins.html


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://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.