global helpers helper functions #vue

Component.vue

<template>
	<div :test="$helpers.foo1()" :test2="bar()"></div>
</template>

<script>
import { bar } from '@/helpers/utils';
</script>

global.js

// src/helpers/utils.js
// these functions can be used without importing
export default {
    foo() {
        return 'foo';
    }
};

main.js

import helpers from './helpers/global';
Vue.use({
    install() {
        Vue.helpers = helpers;
        Vue.prototype.$helpers = helpers;
    }
});

/* usage inside components: */
this.$helpers.foo()
/* usage anywhere else: */
Vue.helpers.foo()

utils.js

// src/helpers/utils.js
// these functions can only be used after importing
function bar() {
    return 'bar';
}
export { bar };