Audio Worklet Web assembly port from vanilla to Vue

So there is this project called heavy compiler , that basically turns puredata patches into web assembly , a recent port creates an audio worklet.
Im trying to use vue instead of vanilla since the template generates a vanilla project , but I cant find a way to do the import in Vue.

this is how the index.html looks like

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">

    <!-- Generated javascript library includes -->
    <script type="application/javascript" src="./test1.js"></script>
      .widget { max-width: 900px; margin: auto; }
      .row { width: 100%; margin-bottom: 10px; }
      .col { display: inline-block; }
      .title { width: 80%; margin: 0 auto; }
      .transport { padding-left: 10px; }
      .parameter-name { width: 35%; text-align: right; }
      .parameter-slider { width: 45%; padding-left: 10px; }
      .parameter-slider input { vertical-align: middle; width: 100%; }
      .parameter-value { width: 10%; padding-left: 10px; text-align: left; }
      .link { margin: 10px 10px 0 0; float: right; }
      span { text-align: right; }

    <script type="text/javascript">
      var heavyModule = null;
      var loader = null;

      window.onload = function() {
        test1_Module().then(loadedModule => {
          heavyModule = loadedModule;
        document.getElementById("transportButton").style.visibility = "hidden";

      function moduleLoaded() {
        loader = new heavyModule.AudioLibLoader();
        document.getElementById("transportButton").style.visibility = "visible";

      async function start() {
        if(!loader.webAudioContext) {
          await loader.init({
            // optional: set audio processing block size, default is 2048
            blockSize: 2048,
            // optional: provide a callback handler for [print] messages
            printHook: onPrint,
            // optional: provide a callback handler for [s {sendName} @hv_param] messages
            sendHook: onFloatMessage,
            // optional: pass an existing web audio context, otherwise a new one
            // will be constructed.
            webAudioContext: null

      function stop() {

      function toggleTransport(element) {
        (loader.isPlaying) ? stop() : start();

      function onPrint(message) {

      function onFloatMessage(sendName, floatValue) {
        console.log(sendName, floatValue);
      // Generated Parameter Update Methods
      function updateSlider_freq(value) {
        document.getElementById("value_freq").textContent = Number(value).toFixed(2);
        if(loader.webAudioWorklet) {
          loader.sendFloatParameterToWorklet("freq", value)
        } else {
          loader.audiolib.setFloatParameter("freq", value);

      function updateSlider_gain(value) {
        document.getElementById("value_gain").textContent = Number(value).toFixed(2);
        if(loader.webAudioWorklet) {
          loader.sendFloatParameterToWorklet("gain", value)
        } else {
          loader.audiolib.setFloatParameter("gain", value);

    <div class="widget">
      <div class="row title">
        <div class="col"><h2>test1</h2></div>
        <div class="col transport">
            start / stop
            <input type="checkbox" id="transportButton" onchange="toggleTransport();">
      <div class="row">
        <div class="col parameter-name">freq</div>
        <div class="col parameter-slider">
          <input id="parameter_freq" type="range" min="100.0" max="2000.0" step="0.01" value="500.0" onchange="updateSlider_freq(value);" oninput="updateSlider_freq(value)">
        <div class="col parameter-value" id="value_freq">500.0</div>
      <div class="row">
        <div class="col parameter-name">gain</div>
        <div class="col parameter-slider">
          <input id="parameter_gain" type="range" min="0.0" max="1.0" step="0.01" value="0.5" onchange="updateSlider_gain(value);" oninput="updateSlider_gain(value)">
        <div class="col parameter-value" id="value_gain">0.5</div>
      <div class="row">
        <span class="link"><em>powered by <a href=""><strong>heavy</strong></em></a></span>

And this are the 2 js files generated with emscripten

All I read around is to import wasm files etc , but this is generated js from the compiler so I really dont understand how to use the async calls to load the module etc they use in the vanilla

Still didn’t figure this out and would love to find a way