Call function from JavaScript module in HTML

Question

Say, I have the following JavaScript module using Vue:

import Vue from "./vue/vue.esm.browser.js";

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello, world!',
    }
});

// Custom function for calling by the button
function changeMessage() {
    app.message = 'Hello from button!';
}

Now I refer to this module:

<script src="js/site.js" type="module"></script>

Then I try to call changeMessage:

<button onclick="changeMessage();">Press me</button>

However, I get the following error in console:

Uncaught ReferenceError: changeMessage is not defined at HTMLButtonElement.onclick

Moreover, in Visual Studio I don't even get it in IntelliSense. When I remove type="module", then everything works fine. How to make html see the module functions?

Answer 1

You can define the function on the global window object:

<script type="module">

  window.greet = function () {
    alert('Hello')
  }

</script>

<button onclick="greet()">Hello</button>