2

So, imagine Vue index.html that also loads some custom script:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    ...
    <script type="text/javascript">
    languagePluginLoader.then(function () {
        pyodide.loadPackage("someName").then(() => {
            // Send message to Vue that everything is fine
        }).catch((err) => {
            // Send message to Vue that it failed
        })
    })
    </script>
    ...
    ...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

Is there a way to communicate with running Vue instance or/and Vuex from the index.html file? For example, I want to show "Loading..." until the script is fully loaded, etc.

  • One way will be to send the message to the service worker and then from the service worker to Vue, but it feels unpractical.

  • Another way is to set windows.script_status = true after the initialization, but window object is not reactive, so Vue will check it once, get undefined and forget about it.

  • UPD: Third way will be to inject scripts from the Vue side and put some function into script.onload to get when it's ready, but not sure how stable the solution is.

So, any advice will do :)

sortas
  • 1,527
  • 3
  • 20
  • 29
  • 1
    I suggest you to use `pyodide.runPythonAsync`. This function will automatically download all import-packages. You still have to wait until the `pyodide` is initialized though. Check out [my answer](https://stackoverflow.com/a/64418958/2329060) – Aray Karjauv Nov 07 '20 at 15:52

2 Answers2

1

I would go the route of an external event hub. Since Vue 3 removed the $on, $off and $once instance methods, the official migration strategy for an event hub is to use an external library, such as mitt. Using e.g. mitt you should be able to signal Vue easily once your other custom scripts have been loaded.

tony19
  • 125,647
  • 18
  • 229
  • 307
Beyers
  • 8,968
  • 43
  • 56
0

The solution was the third one - inject script manually through mounted and put all the logic into script.onload part. Google Maps example:

mounted: function () {
    if (window.google && window.google.maps) {
        this.create_map();
        return;
    }

    var self = this;
    var script = document.createElement("script");
    script.onload = function () {
        if (!window.google && !window.google.maps)
            return void (console.error("no google maps script included"));

        self.create_map();
    };

    script.async = true;
    script.defer = true;
    script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Picked the logic from another SO question's answer: https://stackoverflow.com/a/45605316/1598470.

sortas
  • 1,527
  • 3
  • 20
  • 29
  • The important part - if you want to update component variable from `data` in `.then()` part - reassign `let self = this` at the start (as in the example above), because each `.then()` has its own `this` :) – sortas Oct 26 '20 at 21:05