Using mixins will allow you to write global functions that inject directly into your Vue application. While you can call the function directly it comes with a consequence that the function may conflict with your component function as it has the same name. So with this issue, we need to have a conventional example prefix with $ ($functionName).
Implementation
In the ./src directory create a folder mixins and the index.js file.
Path ./src/mixins/index.js
export default {
methods: {
$fnOne() {
console.log('Console one');
},
$fnTwo() {
console.log('Console two');
}
}
}
In the ./src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './routes';
import mixins from './mixins';
Vue.config.productionTip = false;
Vue.mixin(mixins);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Usage
In any component call directly.
<template>
<div>Content</div>
</template>
<script>
export default {
created() {
this.$fnOne();
this.$fnTwo();
},
};
</script>
