Import external javascript file and use functions globally in vue app Import external javascript file and use functions globally in vue app vue.js vue.js

Import external javascript file and use functions globally in vue app


to add function(s) globally to vue you need to extended vue and write as plugin
it is pretty easy

link

do it as the fallow:
create file plugin.js

import webbshop from '@/assets/lib/js/webbshop.js';// MyPlugin its just a name change to whatever meet you needs.MyPlugin.install = function (Vue, options) {  Vue.myGlobalMethod = function () {    webshop.dothis();  };  Vue.mySecondGlobalMethod = function (a,b,c) {    webshop.dothis(a,b,c);  };...}

now import it to the main Vue file.

import Vue from 'vue'import App from './App.vue'import router from './router'import plugin from './plugin'Vue.config.productionTip = falseVue.use(plugin)new Vue({  router,  render: h => h(App)}).$mount('#app')

after that vue attach your custom methods to all vue instances.
and you can access it anywhere by simply refer it to a vue inner function.
in markup:

<h1 v-text="mySecondGlobalMethod(1,2,3)"></h1>

in javascript:

 const b = this.myGlobalMethod();