How to access other module method(outside VueJs) in component markup? - vue.js

Question

I have one external module as following:
const externalModule = {
thisMethodWantToUseInMarkup: () =>{
alert("success");
}
}
export default externalModule
i want to access thisMethodWantToUseInMarkup from component markup(from button A in following code).
<template lang="html">
<div class="bg-white">
<button #click="externalModule.thisMethodWantToUseInMarkup()">Button A</button> <!-- is it possible like this directly -->
</div>
</template>
what is the best practice to do this ?
Note: - I don't want to import global module in every component.

Answer 1

Use simple import in your script section of the view component (if you're using the default .vue files), or inside your javascript file. Something similar to:
<template lang="html">
<div class="bg-white">
<button #click="customMethod"> <!-- call your internal method -->
Button A
</button> <!-- is it possible like this directly -->
</div>
</template>
<script>
import { externalModule } from './externalModule'
export default {
name: 'mainComponent',
methods: {
customMethod() {
externalModule.thisMethodWantToUseInMarkup()
}
}
}
</script>
Using internal method you won't bind user interaction with a specific implementation, and therefore switching the files/logic for it will simply mean changing the import file. This is useful for testing purposes in where you could dynamically load specific files based on environment for example.